Question

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

这是JFiddle。

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

Answer 1

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

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

toggleClass和slideToggle函数执行我认为您正在尝试执行的操作。

Answer 2

为什么只用一个课程就需要使用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/

Answer 3

请参阅this更新的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);
        }

jQuery切换/滑动重置链接

3 个答案: