所有 div 恢复为默认值，除了活动的一个 jQuery答案

【问题标题】：All divs back to default except for the active one jQuery所有 div 恢复为默认值，除了活动的一个 jQuery
【发布时间】：2011-09-17 02:23:13
【问题描述】：

好的，这是我的脚本。

当您单击了解更多按钮时，它对应于该特定框并相应地下拉正确的信息。

我想添加一个功能，因此当您单击另一个了解更多信息时，并且已经有一个包含信息的 div 打开，它会像此脚本中切换的尾部一样自行关闭。

基本上，我不想同时打开两个 learn more。如果你选择一个，那么其余的都是关闭的。页面的设置方式，我一次只能打开一个。

$(document).ready(function(){ 


 var service = $(".service"), text = $(".service-text, h1.service-heading"), moretext = $(".more-text"); 


$(".learn").toggle(
               function()
               {
                $(this).parent().find(service).animate({ backgroundColor : "#000000" }, 800);
                $(this).animate({ backgroundColor : "#FFFFFF" }, 800);
                $(this).parent().find(text).animate({ color: "#FFF"}, 800);
                $(this).parent().find("span.more").animate({ color : "#000000" }, 800, function () {
                    $(this).parent().parent().find(".service").animate({ height : "500px"}, 800, function () {
                            $(this).find(moretext).show().animate({ color: "#FFFFFF"}, 800);

                            $(this).parent().find("span.more").animate({ color : "#FFF"}, 800, function () {
                                                                                                         $(this).hide();
                                                        $(this).parent().find("span.less").show( function () {
                                                                                                           $(this).animate({ color: "#000000"}, 800);
                                                                                                         });
                                                                                                         });
                                                                                                           });
                                                                                                 });
               },
               function()
               {
                $(this).parent().find(service).animate({ backgroundColor : "#FFFFFF" }, 800, function () {
                            $(moretext).animate({ color: "#FFFFFF"}, 800, function () {
                                                                                    $(this).hide();
                                                                                                       });
                             });
                $(this).animate({ backgroundColor : "#000000" }, 800);
                $(this).parent().find(text).animate({ color: "#000000"}, 800);
                $(this).parent().find("span.less").animate({ color: "#FFFFFF"}, 800, function() {
                    $(this).parent().parent().find(service).animate({ height: "180px"}, 800, function () {
                                        $(this).parent().find("span.less").animate({ color: "#000000"}, 800, function () {
                                                                                                                       $(this).hide();
                                                            $(this).parent().find("span.more").show( function () {
                                                                                                           $(this).animate({ color: "#FFFFFF"}, 800);
                                                                                                                       });
                                                             });
                                                                                                       });
                                                                                              });





                   });
   });

【问题讨论】：

你应该提供一个简单的代码！！

标签： javascript jquery css css-selectors

【解决方案1】：

你可以这样做

$(".learn").click(function(){
    $(".learn").not(this).doSomeThing(/* some code */);
});

通过此代码，您可以从集合中排除当前单击的项目

【讨论】：

假设上面是有效的代码（我不熟悉 jQuery）我假设 /* some code */ 可以隐藏/关闭所有“了解更多的 except”这个”？如果更熟悉 jQuery 的人能澄清一下，我将不胜感激。 :)
$(".learn").not(this)选择的集合除了this、doSomeThing(/* Some Code */);之外都是learn more的按钮是你想用这个集合做的操作，所以它可以是 (hide() , toggle() ,.... )

【解决方案2】：

伪代码：

给所有相关的 div 一个特殊的类名
将切换尾部的“关闭”函数分离为一个单独的函数，使其不会关闭具有“活动”类的 div
设置一个侦听器以单击了解更多信息，将“活动”类添加到单击的事物中，然后在执行操作之前为所有（其他）div 调用该关闭函数

【讨论】：