1

我为网站上的一些文本制作了一个切换脚本。我有大约 10 个“头”链接和两个 h3 链接。基本上，如果您单击一个头部链接，它会通过再次单击来打开和关闭。如果你点击h3，它们都打开了。如果已经打开，它会保持打开状态。一个问题是，如果您将它们全部打开然后关闭并仅打开一个然后尝试将它们全部关闭，您必须单击 h3 两次。这是因为当它自己打开时，它会给出一个 active1 类，而当它们一起打开时，它会给出一个 active 类。因此，当我第一次点击 h3 时，它会将 active1 变为活动状态（这样它们就可以在只有一个打开并且您想将它们全部打开的情况下全部关闭或打开），然后第二次它最终关闭了所有活动. 希望这是有道理的。

这是JFiddle。

$(".topics").hide();
4

3 回答 3

0

请参阅此更新的 jsFiddle。

原始代码：

 if( $(".head").hasClass("active1") ){
    $(".head").removeClass("active1").addClass("active").next().slideDown(350);
        } else

更新代码：

$("h3").click(function(){
    if( $(".head").hasClass("active1") ){
    $(".head").removeClass("active1").next().slideUp(350);
        }
于 2012-11-21T15:26:41.890 回答
0

当你可以只使用一个类时，为什么还需要使用 2 个类？它只是告诉你哪些是开放的或不开放的。

$("h3").click(function() {
    var $div = $(this).siblings('.head'); // cache the relative divs
    var len = $div.filter('.active').length; // get how many are active
    var $topic = $(".topics", $(this).parent()); // topics relative to element
    if (len == $div.length) { // if all are active
        $div.removeClass('active'); // remove class active
        $topic.slideUp(350); // slideup
    } else {
        $div.addClass('active'); // else add active to all
        $topic.slideDown(350) //  slide down
    }
});

$(".head").click(function() {
    var $el = $(this); // cache this
    if ($el.hasClass("active")) {
        $el.removeClass("active").next().slideUp(350);
    } else {
        $el.addClass("active").next().slideDown(350);
    };
});

http://jsfiddle.net/pmsJa/

于 2012-11-21T15:19:18.310 回答
0

这是您所追求的功能吗：http: //jsfiddle.net/Ry6Nr/8/？

$(document).ready(function(){    
    $(".topics").hide();        
    $(".head").click(function(){
        $(this).toggleClass("active").next().slideToggle();
    });
});

toggleClassandslideToggle函数做我认为你正在尝试做的事情。

于 2012-11-21T15:18:24.883 回答