Question

我在使用JQuery手风琴时遇到了一些问题。我想创建“动态”手风琴（通过“addBtn”的点击添加新项目），创建了一个新项目，但切换不适用（仅应用第一项）

HTML

<div id="accordion">

        <div id="aE">
                <div id="aT" class="aT_val"> 
                        <h3></h3>
                </div>
                <div id="aC" class="aC_val">
                        <p></p>
                </div>
        </div>

</div>

JS

var conTit = 'title';
var conCont = 'content';

var count = 0;

$('.aC_val').hide();

$('.aT_val').toggle(
    function() {
        $(this).next('.aC_val').show();
    },
    function() {
        $(this).next('.aC_val').hide();
    }
);

$('#addBtn').click(function() {
        count++;

        $('#accordion').append('<div id="aE' + count + '"><div id="aT' + count + '" class="aT_val"><h3>' + conTit + '</h3></div><div id="aC' + count + '" class="aC_val"><p>' + conCont + '</p></div></div>');

bug，同事在哪里？

Answer 1

对于动态生成的元素，应委派事件，您可以使用on方法：

$(document).on('click', '.aT_val', function(){
     $(this).next().toggle();
})

请注意，toggle事件为deprecated。

Answer 2

在

之后，手风琴功能是否不期望<h3>标签

<div id="accordion"> tag

示例：

<div id="accordion">
    <h3><a href="#"></a>General Variables</h3>
    <div>
    </div>

jQuery切换不起作用

2 个答案: