Question

我有一个可点击的，可折叠的div脚本：

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        $(".toggle-content").hide();
        $(this).next(".toggle-content").slideToggle(500);   
    });
});

它就像这样开始：

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        $(this).next(".toggle-content").slideToggle(500);   
    });
});

第二个例子运行得很好，但它使得用户可以打开所有div，这使得页面太高了。我添加了hide()函数，但现在它引发了另一个问题。

我想添加一些功能，当再次点击每个div时，它实际上会关闭它（隐藏它）。然后，此时将关闭（隐藏）所有div s。目前，一个div始终处于打开状态（可见）。如果可能，我想要两个功能......

我在其他地方使用手风琴（我知道这可以在这里使用）但我需要快速实现这一点，所以我不打算在这里实现更简单的脚本。如果我可以使用现有脚本找到修复程序，我会被激怒。

修改

我编辑了小提琴以显示改进的修复：

http://jsfiddle.net/nicorellius/gsDVS/

Answer 1

这应该有效。它将忽略隐藏与被点击元素相关的内容，并将相应地滑动该div

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        var $next= $(this).next(".toggle-content");
        $(".toggle-content").not($next).hide();
        $next.slideToggle(500);   
    });
});

使用jQuery hide（）的可点击DIV

1 个答案: