没有插件的jQuery切换手风琴答案

【问题标题】：jquery toggle accordian without plugin没有插件的jQuery切换手风琴
【发布时间】：2011-03-11 07:00:28
【问题描述】：

您好，有两个内容部分，我一次只希望打开 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");                                                                     
});

任何帮助将不胜感激。

谢谢

【问题讨论】：

请粘贴一些相关的标记。
更新帖子更完整

标签： jquery accordion slidetoggle toggleclass

【解决方案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");  
});

有很多更好的方法可以做到这一点。我为您提供的初始链接有一个示例。如果你想要更健壮的东西，那么你需要创建一些方法来逻辑地将你的链接与你的 div 联系起来。

【讨论】：

我的工具类部分怎么样？我也需要更改 a 标签的背景。无论如何，这对我正在寻找的东西不起作用。我还有几个需要点击的工作部分仍然可见
@estern：只需将这些方法链接到它们各自的调用中。例如(this).slideDown().toggleClass("openBox")
由于您已经想明确显示/隐藏哪一个，您可能希望对类执行相同操作，以减少在与显示/隐藏相反的状态下切换类的机会. (this).slideDown().addClass("openBox"); 和 $("yourdivs").slideUp().removeClass("openBox");.

【解决方案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>

除了我为每个内容 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 端看起来更漂亮:) 否则你可以使用这个实现并避免任何样式问题。

【讨论】：