Question

好的，这是我的脚本。

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

我想添加一个功能，所以当你点击ANOTHER了解更多信息，并且已经有信息打开div时，它会像这个脚本中的切换的尾端一样自行关闭。

基本上，我不想让两个人同时学习更多。如果您选择一个，那么其余所有都将关闭。页面的设置方式，我一次只能打开一个。

$(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);
                                                                                                                       });
                                                             });
                                                                                                       });
                                                                                              });





                   });
   });

Answer 1

你可以这样做

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

通过此代码，您可以从集合

中排除当前点击的项目

Answer 2

伪代码：

为所有相关div提供一个特殊的类名称
将尾部的“关闭”功能分开切换为单独的功能，使其不会使用“活动”类关闭div。
设置一个用于点击的监听器了解更多内容，将“活动”类添加到单击的内容中，然后在执行其操作之前调用所有（其他）div的关闭功能

除了活动的jQuery之外，所有div都恢复为默认值

2 个答案: