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

最近在这里回答了这个问题：当另一个 div 打开时，我需要什么代码来折叠另一个 div？

最简单的方法是折叠两个 div，然后展开您想要的那个。已经折叠的将被忽略。

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

更新：以上对他不起作用，因为 和

之间没有直接链接。这真的很难看，但以下作品 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。

Answer 2

如果可能的话，我尽量不改变你的 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 是相同的，只是我向每个内容 div 添加了一个类。

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 和 close 类，这可能是多余的，但我不确定您的样式是否依赖它。

一般来说，这个功能可以通过多种方式来完成，如果您愿意稍微改变一下 HTML，我们可以让 JS 端看起来更漂亮一点:) 否则您可以只使用这个实现并避免任何样式问题。