jQuery切换/滑动重置链接

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

这里是JFiddle。

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

来源

2012-11-21 user1842315

这是你后的那种功能：http://jsfiddle.net/Ry6Nr/8/？

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

的toggleClass和slideToggle功能做什么，我认为你正在试图做的。

来源

2012-11-21 15:18:24 mibbler

为什么你需要使用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-21 15:19:18

真棒太感谢你了！我对jQuery非常陌生。有时我会让事情知道有更简单的方法，但我只是不知道要做到这一点。非常感谢 – user1842315

@ user1842315不客气:)希望这是你正在寻找的..也检查绿色复选标记，如果这回答了你的问题 –

见this更新的jsfiddle。

原始代码：

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

Upadted代码：

$("h3").click(function(){ 
    if($(".head").hasClass("active1")){ 
    $(".head").removeClass("active1").next().slideUp(350); 
     }

来源

2012-11-21 15:26:41

jQuery切换/滑动重置链接

回答

相关问题