Question

我在一行中创建了3个框，并且想要使用它们进行切换，默认情况下单击每个框，下面会显示一些内容。现在我希望在每个内容上都有关闭按钮，然后通过单击其他框来展开，剩余展开的内容应该折叠。

我正在使用uikit，

以下是您可以看到的链接：http://hamliran.com/index.php/test-page

当您点击项目1时，将显示内容，通过单击项目2，目标内容应该展开，第一个内容应该关闭。

TNX

Answer 1

查看此Fiddle ..

$("div.result").each(function(){
   $(this).slideToggle(0);//close all target content
});
$("div.name").click(function(){

    if($(this).hasClass("active")){
        //if it's currently shown, close it
        $("div"+$(this).text()).slideToggle(0);
    }else{
        $("div.name").each(function(){
            if($(this).hasClass("active")){
                //close any opened target content
                $("#"+$(this).text()).slideToggle(0);
                $(this).removeClass("active");
            }
        });
        //open the new selected one
        $(this).addClass("active");
        $("#"+$(this).text()).slideToggle(100);
    }

})

jQuery切换扩展和折叠

1 个答案: