jquery在時間切換一格div

Question

在我的html頁面中，我有2個切換功能的div。 我需要修改這個js讓它關閉其他分區時，一個是開放

我的js

jQuery("div.bk-toggle-header").click(function(){ 
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({ 
height: 'toggle' 
}, 'slow', function() {     
}); 
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed'); 
}); 

我的HTML

<div class="bk-toggle bk-toggle-closed"> 
    <div class="bk-toggle-header content-separator"> 
    <span class="title">First Tab</span> 
    <span class="bk-header-button"></span> 
</div> 
<div class="bk-toggle-content-outer-wrap"> content 
    </div></div> 

    <div class="bk-toggle bk-toggle-closed"> 
    <div class="bk-toggle-header content-separator"> 
    <span class="title">Second Tab</span> 
    <span class="bk-header-button"></span> 
</div> 
<div class="bk-toggle-content-outer-wrap" > content 
    </div></div> 

我將不勝感激一些幫助切換的div一個在時間。下面

Answer 1

工作演示http://jsfiddle.net/f492H/

解決方案將切換DIV一次一個。你可以玩其他的Jquery方式以及像使用is(':visible')

API：

• .slideToggle：http://api.jquery.com/slideToggle/
• .parents：http://api.jquery.com/parents/

希望它符合您的需求:)

代碼

$('.bk-toggle-content-outer-wrap').hide(); 
$('.title').on('click', function (e) { 
    $('.bk-toggle-content-outer-wrap').hide(); 
    $(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle(); 
}); 

Answer 2

我可以爲您提供我爲以前的項目編寫的手風琴班。這是相當靈活的，應該完成你所要求的和更多。文檔不存在，但如果您選擇使用它，我很樂意回答任何實施問題。

這是一個小提琴：http://jsfiddle.net/YjAgb/1/

UPDATE： 這裏是你的HTML結構工作的另一個小提琴：http://jsfiddle.net/WfWEP/

而且，爲的是徹底的緣故，這裏的演示碼。

HTML

<div id='accordion'> 
    <div class='accHead'>Head 1</div> 
    <div class='accBody'>Body 1</div> 
    <div class='accHead'>Head 2</div> 
    <div class='accBody'>Body 2</div> 
    <div class='accHead'>Head 3</div> 
    <div class='accBody'>Body 3</div> 
</div> 

的JavaScript

function accordion(options){ 

     this.index = options.index; 
     var openChild = false; 

     var self = this; 
     var cEvent = {}; 
     var slideSpeed = 200; 

     var headClass = '.accHead'; 
     var bodyClass = '.accBody'; 

     var $parent = options.parent; 
     var $heads = $parent.find(headClass); 
     var $bodies = $parent.find(bodyClass) 

     $heads.on('click', function(e){ 

      var headClicked = $heads.index($(this)) + 1; 
      var wasTriggered = (!e.clientX); 

      var previousOpen = (headClicked == openChild) ? headClicked : openChild; 
      var newOpen = (headClicked == openChild) ? false : headClicked; 

      $heads.add($bodies).removeClass('on'); 

      if (!openChild) { 
       var type = 'open'; 
      } else if(headClicked == openChild) { 
       var type = 'close'; 
      } else { 
       var type = 'swap'; 
      } 

      cEvent = { clicked: headClicked, 
         triggered: wasTriggered, 
         previousOpen: previousOpen, 
         openChild: newOpen, 
         headElement: $(this), 
         bodyElement: $bodies.index(headClicked - 1), 
         type: type, 
         accordion: self 
        }; 

      options.click_callback(cEvent); 

      if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild); 
      if ((!openChild) || (headClicked != openChild)) openLevel(headClicked); 

      openChild = newOpen; 

     }); 

     var openLevel = function(levelId) 
     { 
      var $bodyEl = $bodies.eq(levelId - 1); 
      var $headEl = $heads.eq(levelId - 1); 
      cEvent.bodyElement = $bodyEl; 
      cEvent.headElement = $headEl; 

      $headEl.addClass('on'); 
      $bodyEl.addClass('on').slideDown(slideSpeed, function(){ 
       options.open_callback(cEvent); 
      }) 
     } 

     var closeLevel = function(levelId) 
     { 
      var $bodyEl = $bodies.eq(levelId - 1); 
      var $headEl = $heads.eq(levelId - 1); 
      cEvent.bodyElement = $bodyEl; 
      cEvent.headElement = $headEl; 

      $bodyEl.slideUp(slideSpeed, function(){ 
       options.close_callback(cEvent); 
      }); 
     } 

     this.closeAll = function() 
     { 
      $heads.add($bodies).removeClass('on'); 
      $bodies.slideUp(0); 
      return this; 
     } 

     this.click = function(levelId, caller) 
     { 
      if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click'); 
     } 

     this.getHead = function(levelId) 
     { 
      return $heads.eq(levelId - 1); 
     } 

     this.getBody = function(levelId) 
     { 
      return $bodies.eq(levelId - 1); 
     } 

     this.getParentAcc = function() 
     { 
      return $parent; 
     } 

    } 

newAcc = new accordion({ 
    parent: $('#accordion'), 
    click_callback: function(){}, 
    open_callback: function(){}, 
    close_callback: function(){}, 
    }) 
    .closeAll();