jquery切换无线手风琴

Question

嗨有两个内容部分，我只想要一次打开1。基于点击标题，它们都会崩溃并打开。我目前正在工作，他们是彼此独立的，但我希望让他们在显示时隐藏另一个。我不想为jQuery手风琴使用插件。

这里是代码，我现在：

HTML：

<div class="topCats"> 
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4> 
</div> 
<div id="topCatsContainer"> 
    content 1 
</div> 
<div class="allCats"> 
    <h4><a href="#" class="closed">All Categories</a></h4> 
</div> 
<div id="allCatsContainer"> 
    content 2 
</div> 

JS：

$('#allCatsContainer').css("display", "none"); 
$('.topCats h4 a').click(function() { 
    $('#topCatsContainer').slideToggle(500); 
     $(this).toggleClass("openBox"); 
}); 

$('.allCats h4 a').click(function() { 
    $('#allCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox");                  
}); 

任何帮助将不胜感激。

感谢

Answer 1

我试图不改变你的HTML如果可能的话，这样你就不必处理样式头痛。不幸的是，这意味着JS比我想要的更硬编码。

HTML：

<div class="topCats"> 
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4> 
</div> 
<div id="topCatsContainer" class="accordianContent"> 
    content 1 
</div> 
<div class="allCats"> 
    <h4><a href="#" class="closed">All Categories</a></h4> 
</div> 
<div id="allCatsContainer" class="accordianContent"> 
    content 2 
</div> 

的HTML是一样的，除了我添加了一个类，每个内容股利。

JS：

$('#allCatsContainer').css("display", "none"); 

$('.topCats h4 a, .allCats h4 a').click(function() { 
    var content = $(this).parent().parent().next(); 

    if(content.is(':visible')) { 
     content 
      .slideUp(500) 
      .addClass('closed') 
      .removeClass('openBox'); 
    } else { 
     content 
      .parent() 
      .find('.accordianContent:visible') 
      .slideUp(500) 
      .addClass('closed') 
      .removeClass('openBox'); 

     content.slideDown(500).removeClass('closed').addClass('openBox'); 
    } 
}); 

基本上JS认定，被点击的链接相匹配的内容。如果内容可见，那么它只是关闭自己。如果它不可见，那么我们关闭任何可见的并打开点击的内容。

如果您发现我正在切换openBox和closed类，这可能是多余的，但我不确定您的样式是否依赖它。

一般来说，这个功能可以通过多种方式完成，如果你愿意改变你的HTML，我们可以让JS方面看起来更具有代表性:)否则，你可以使用这个实现并避免任何样式问题。

Answer 2

这是回答最近在这里：What code do i need to collapse a div when another is open?

最简单的办法是既崩溃，然后展开你想要的。已经崩溃的那个将被忽略。

$('yourdivs').click(function() { 
    $("yourdivs").slideUp(); 
    $(this).slideDown(); 
}); 

更新：以上不会为他工作，因为有<a>和<div>之间没有直接的联系。这实在是太丑了，但下面的工作http://jsfiddle.net/mrtsherman/MPwQ8/3/

$('#allCatsContainer').css("display", "none"); 

$('.topCats h4 a').click(function() { 
    $('#topCatsContainer').slideToggle(500);  
    $('#allCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox"); 
}); 

$('.allCats h4 a').click(function() { 
    $('#allCatsContainer').slideToggle(500); 
    $('#topCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox"); 
}); 

有很多更好的方法来做到这一点。我为你提供的初始链接有一个例子。如果你想要更强大的功能，那么你需要创建一些手段来将你的链接逻辑地绑定到你的div。