2

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

任何帮助将不胜感激。

谢谢

4

2 回答 2

2

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

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

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

Update: Above won't work for him because there is no direct link between <a> and <div>. This is really ugly, but the following works 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");  
});

There are lots better ways to do this. The initial link I provided you has an example. If you want something more robust then you need to create some means to logically tie your links to your divs.

于 2011-03-10T21:35:17.150 回答
1

I tried to not alter your HTML if possible, so that you wouldn't have to deal with styling headaches. Unfortunately this means the JS is a bit more hard coded than I would like.

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>

The HTML is the same except I added a class to each of your content 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');
    }
});

Basically the JS finds the content that matches the link that was clicked. If the content was visible then it just closes itself. If it wasn't visible then we close whichever was visible and open the clicked content.

If you notice I am toggling both the openBox and closed class, which can be redundant but I wasn't sure if your styling relied on it or not.

In general this functionality can be accomplished many ways and if you are willing to change your HTML a bit we could have the JS side look a bit more presentable :) Otherwise you can just use this implementation and avoid any styling headaches.

于 2011-03-10T23:00:28.560 回答