更新

Question

我有这个标记：

<h3 id="btn-1">Content Title</h3>
<ul><li>Some Content</li></ul>
...stuff here and further down the page... 
<h3 id="btn-2">Content Title 2</h3>
<ul><li>Some content 22</li></ul>

无序列表中的内容应该在单击“h3”时下拉，并且还将类附加到h3，以便基于打开/关闭状态创建样式。所以我有这个按我的意愿工作：

    $("#btn-1, #btn-2").attr('class','inactive');
    $("#btn-1").click(function (){
    if ($("#btn-1 + ul").is(":hidden")) {
            $("#btn-1 + ul").slideDown("slow"),$("#btn-1").attr('class','active');
                } else {
            $("#btn-1 + ul").slideUp('slow'),$("#btn-1").attr('class','inactive');
        }
    }); 


    $("#btn-2").click(function (){
        if ($("#btn-2 + ul").is(":hidden")) {
            $("#btn-2 + ul").slideDown("slow"),$("#btn-2").attr('class','active');
                } else {
            $("#btn-2 + ul").slideUp('slow'),$("#btn-2").attr('class','inactive');
        }
    });

我一直在寻找一种更有效的编写代码的方法，我想出了这个，但它同时将动画应用于所有容器。

    $("h3[id^='btn-']").attr('class','inactive');
    $("h3[id^='btn-']").click(function (index){
        if ($("h3[id^='btn-'] + ul").is(":hidden")) {
            $("h3[id^='btn-'] + ul").slideDown("slow"),$("h3[id^='btn-']").attr('class','active');
                } else {
            $("h3[id^='btn-'] + ul").slideUp('slow'),$("h3[id^='btn-']").attr('class','inactive');
        }
    });

所以我的问题是，有没有更好的方法来减少第一个工作解决方案中的代码？感谢。

Answer 1

在点击处理程序中，您可以使用this来点击元素（而不是使用$("h3[id^='btn-']")，这会获得所有<h3>个），然后获取{{ 1}}旁边。

<ul>

DEMO：http://jsfiddle.net/8cFeF/1/

Answer 2

在回调函数中使用this来引用触发事件的元素：

$("h3[id^='btn-']").attr('class','inactive').click(function (index){
    $(this).toggleClass('inactive active').next().slideToggle("slow");
});

通过使用切换功能，您可以看到这进一步简化了代码：

.toggleClass()：http://api.jquery.com/toggleClass
.slideToggle()：http://api.jquery.com/slideToggle

以下是演示：http://jsfiddle.net/jasper/a692n/3/

更新

您正在使用的RegExp选择器有效但它必须查找DOM中的每个元素以查看该元素是否具有指定的属性以及该属性值是否匹配。我建议在<h3>元素中添加一个类，因为当你按类选择时，jQuery使用getElementByClass它可用（这是选择元素的快捷方式）：

HTML -

<h3 class="h3-title" id="btn-1">Content Title</h3>
<ul><li>Some Content</li></ul>
...stuff here and further down the page... 
<h3 class="h3-title" id="btn-2">Content Title 2</h3>
<ul><li>Some content 22</li></ul>

JS -

$(".h3-title").attr('class','inactive').click(function (index){
    $(this).toggleClass('inactive active').next().slideToggle("slow");
});

Answer 3

虽然不那么可读，但你要求高效，这里有一行：

//hide content then only slide up other visible things 
$("h3[id^='btn-']").next("ul").hide().end().click(function (){ $("h3[id^='btn-']").next("ul").not(  $(this).next("ul").slideDown("slow").end().next("ul")).slideUp("slow"); });

更易读的格式：

//hide content then only slide up other visible things 
$("h3[id^='btn-']").next("ul").hide().end().click(function() {
    $("h3[id^='btn-']").next("ul").not(
    $(this).next("ul").slideDown("slow").end().next("ul")).slideUp("slow");
});

试一试：http://jsfiddle.net/t4JF4/

单独选择多个div

3 个答案:

更新