jquery 切换 Accordion 无需插件

Question

您好，有两个内容部分，我只想一次打开 1 个。它们都通过单击标题来折叠和打开。我目前的工作方式是它们彼此独立，但我希望它们在显示时隐藏对方。我不想使用 jquery Accordion 插件。

这是我现在的代码:

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

最近在这里回答了这个问题: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");  
});

有很多更好的方法可以做到这一点。我为您提供的初始链接有一个示例。如果你想要更强大的东西，那么你需要创建一些方法来逻辑地将你的链接绑定(bind)到你的 div。