再次单击时关闭javascript选项卡

Question

我有带有选项卡的部分，需要再次单击该选项卡时关闭这些选项卡。

我认为这需要切换方法，但是我不确定该怎么做。

这是HTML：

<div class="tab">

 <button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>

 <button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>

 <button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>

</div>

<div id="srv1-sub1" class="tab-content">

 <p>Text</p>

</div>

<div id="srv1-sub2" class="tab-content">

 <p>Text</p>

</div>

<div id="srv1-sub3" class="tab-content">

 <p>Text</p>

</div>

这是制表符功能：

function openSubSvc(evt, subSvcName) {

    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tab-content");

    for (i = 0; i < tabcontent.length; i++) {

        tabcontent[i].style.display = "none";

    }

    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].className = tablinks[i].className.replace(" active", "");

    }

    document.getElementById(subSvcName).style.display = "block";

    evt.currentTarget.className += " active";

}

这是CSS：

.tab {

 float: left;

 padding:0!important;

 margin:0!important;

}

.tab button {

 padding: 15px;

 width: 100%;

 text-align: left;

 transition: 0.3s;

}

.tab button:last-child {margin-bottom:0;}

.tab button:hover {background-color: #ddd;}

.tab button.active {background-color: #ccc;}

.tab-content {

 width:70.8%!important;

 margin-left:2%!important;

 margin-bottom:0;

 padding:0!important;

}

因此，如果单击第一个选项卡并打开内容，则我需要在再次单击该内容时将其关闭。