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

最近在这里回答：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。

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>

除非我为每个内容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方面看起来更具代表性:)否则你可以使用这个实现并避免任何造型问题。< / p>

没有插件的jquery切换手风琴

2 个答案: