Question

我有一些动态创建的下拉框，如下面的PHP代码段所示。当你点击标题下拉它时，它会打开每个div，你可以在下面的小提琴中看到。如何从PHP添加变量并将其用于jQuery脚本，以便每个标题在自己的div上打开而不影响其他标题？实际上我正在寻找的是带有PHP变种的手风琴功能。

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

您不需要使用开放类（在本例中），您只需要使用

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

See working demo

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

2 个答案: