使用數據切換屬性打開的jQuery關閉div？

我有幾個隱藏的divs打開使用引導和數據切換，我不能有多個隱藏的div顯示，所以當打開一個我想其他人關閉。使用數據切換屬性打開的jQuery關閉div？

這是我試過的jQuery，但是當＃add-alert-box關閉時我沒有收到警報。我有一個demo in jsfiddle這是可能的或將我必須激活每個隱藏的div使用jQuery而不是數據屬性？

jQuery(document).ready(function ($) { 

    $("#add-alert-box").collapse({ 
     toggle: false 
    }) 

    $('#add-alert-box').on('hide', function() { 
     alert('test'); 
     console.log('test'); 
    }) 

});

來源

2013-08-30 Anagio

因爲DIV沒有設置爲隱藏在這裏，而其高度改變爲0px – SarathSprakash

我覺得有更好更容易的實現。你應該使用Jquery ui Accordion。檢查：http://jqueryui.com/accordion/

來源

2013-08-30 08:25:38

引導隱藏事件將不會在這裏工作有內置與父母手風琴屬性關閉所有其他公開的div。 – Anagio

嘗試這種方式

<div class="container-fluid"> 
      <div class="row-fluid"> 
       <div class="span8"> 
        <div class="tabs"> 
        <ul class="nav nav-tabs top-nav pull-right" id="tabs"> 
         <li class="top-nav-item" style="visibility:hidden"><a href="javascript:void(0)"><i class="icon-circle-arrow-left icon-white"></i></a></li> 
         <li style="background-color:white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-home"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
         <li class="top-nav-item"><a href="#home" data-toggle="tab"><i class="icon-home icon-white"></i>&nbsp;HOME</a></li> 
         <li class="top-nav-item"><a href="#showroom" data-toggle="tab"><i class="icon-car icon-white"></i>SHOWROOM</a></li> 
         <li class="top-nav-item"><a href="#cars" data-toggle="tab">CARS</a></li> 
         <li style="background-color:white">&nbsp;</li> 
         <li class="top-nav-item"><a href="#shortlisted" data-toggle="tab"><i class="icon-ok icon-white"></i>&nbsp;SHORTLISTED</a></li> 
         <li class="top-nav-item"><a href="#settings" data-toggle="tab"><i class="icon-cog icon-white"></i>&nbsp;SETTINGS</a></li> 
        </ul> 
        </div> 



       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="span12"> 
        <div id="tab-content" class="tab-content"> 
         <div id="home" class="tab-pane"> 
          Home 
         </div> 
         <div id="showroom" class="tab-pane"> 
          Showroom 
         </div> 
         <div id="cars" class="tab-pane well"> 
          Cars 
         </div> 
         <div id="shortlisted" class="tab-pane"> 
          Shortlisted 
         </div> 
         <div id="settings" class="tab-pane"> 
          Settings 
         </div> 
        </div>    
       </div> 
      </div> 


     </div>

演示http://jsfiddle.net/Zyxjt/1/

來源

2013-08-30 08:27:44 rakeshjain

這是標籤式內容，並不是我期望完成的 – Anagio

你可以檢查基本的演示和風格，並根據您的需要顏色故。

http://jsfiddle.net/76MbN/4/

$(document).ready(function() { 
    $('.sideContent').hide(); 
    $('.sideHeader').click(function() { 
     event.preventDefault(); 
     var $slideContent = $(this).next() 
     var slideDown = $slideContent.is(":not(:visible)"); 
     $('.sideContent').slideUp('fast'); 

     if (slideDown) 
      $slideContent.slideDown('fast'); 
    }); 
});

來源

2013-08-30 08:38:01

使用數據切換屬性打開的jQuery關閉div？

回答

相關問題