單擊按鈕時折疊所有選項卡

Question

腳本：

 $(document).ready(function () {
        $("#Tabs").tabs();

  $("#close").click(function () {
    $("#Tabs").tabs({collapsible: true,active: false });
 });

的HTML：

 <div id="Tabs">
    <ul>
     <li><a href="#form_1">Details</a></li>
     <li class="end"><a href="#form_2" style="width: 82px !important">Show Map</a></li>
    </ul>
   <div >
     <div id="form_1" style="color:Black !important;" >
       <div class="bg">
         form 1
         </div>
        </div>
       <div id="form_2" style="color:Black !important;" >
       <div class="bg">
         form 2
         </div>
       </div>
     </div>
       </div>
   <a href="javascript:void(0)" class="close" id="close" >close</a>

我正在使用jquery選項卡，當我單擊close時我試圖關閉所有打開的選項卡，但是它不起作用嗎？

Answer 1

試試這個jsFiddle ..

代碼如下

jQuery函數...

$(document).ready(function () {
        $("#Tabs").tabs();

  $("#close").click(function () {
    $("#Tabs").tabs({
        hide: {
            effect: "fade",
            duration: 500
        },
        show: {
            effect: "fade",
            duration: 500
        },
        collapsible: true,
        active: false
    });
 });
});

HTML代碼...

<div id="Tabs">
  <ul>
    <li>
      <a href="#form_1">
        Details
      </a>
    </li>
    <li class="end">
      <a href="#form_2" style="width: 82px !important">
        Show Map
      </a>
    </li>
  </ul>
  <div >
    <div id="form_1" style="color:Black !important;" >
      <div class="bg">
        form 1
      </div>
    </div>
    <div id="form_2" style="color:Black !important;" >
      <div class="bg">
        form 2
      </div>
    </div>
  </div>
</div>
<a href="javascript:void(0)" class="close" id="close" >
  close
</a>

Answer 2

從文檔中：

設置為true時，可以關閉活動面板 。

由於jQuery並未公開關閉所有標簽頁的方法，因此您必須手動執行以下操作：

$("#close").click(function () {
    $('.ui-tabs-panel').hide()
});

小提琴： http : //jsfiddle.net/4mtM4/