jQuery 多个动态创建的向下滑动 DIV 全部同时打开

Question

我有一些动态创建的下拉框，如下面的 PHP 片段所示。当您单击标题下拉时，它每隔 div 打开一次，如下面的 fiddle 所示。我如何从 PHP 添加变量并将其工作到 jQuery 脚本中，以便每个标题自己打开 div 而不影响其他标题？实际上，我正在寻找的是带有 PHP vars.

的手风琴函数

FIDDLE

JQUERY

$(function(){

//category drop downs

$(".category").hide();
$( ".tags h5" ).addClass( "open" );

var cat_open = 0;

$(".tags h5").click(function () {

    if (cat_open == 1) {
        $(".category").animate({"height":"toggle"}, 500);
        cat_open = 0;
        $( ".tags h5" ).addClass( "open" );
    }
    else if (cat_open == 0) {
        $(".category").animate({"height":"toggle"}, 500);
        cat_open = 1;
        $( ".tags h5" ).removeClass( "open" );
    }

});
});

PHP

foreach ( $categories as $category ){

echo '<h5 class="">'. $category->name . '</h5>';

echo'<div class="category '. $category->name . '">';

$sub_args = array(
    'taxonomy'      => 'tags',
    'parent'        => $category->term_id, // get child categories
    'orderby'       => 'name',
    'order'         => 'ASC',
    'hierarchical'  => 1,
    'pad_counts'    => 0
);

$sub_categories = get_categories( $sub_args );

foreach ( $sub_categories as $sub_category ){

    echo '<label><input type="checkbox" id="type-'. $sub_category->name . '" rel="'. $sub_category->name . '">'. $sub_category->name . '</label>';

    echo '<br />';

}

echo'</div>';//.categories

echo '<hr />';

}

Answer 1

不用php也可以。 http://jsfiddle.net/tkp3jzrp/2/

$(function(){

    //category drop downs

    $(".category").hide();
    $( ".tags h5" ).addClass( "open" );

    $(".tags h5").click(function () {           
          $(this).next('.category').animate({"height":"toggle"}, 500);           

    });
});

Answer 2

你不需要使用open 类（在这种情况下），你只需要使用

$(".tags h5").click(function () {
    $(this).next(".category").slideToggle();
});

See working demo

jQuery 多个动态创建的向下滑动 DIV 全部同时打开

jQuery multiple dynamically created slide down DIV's all open at once

php

jquery

dynamic

jquery-ui-accordion

slidedown