Question

请找到jsfiddle。

如果在项目折叠时单击“删除” - 那么当您打开下一个时，它的标题会向上滑动，就像手风琴内容一样，任何人都知道为什么会发生这种情况？

我认为可能会发生这种情况，因为手风琴不知何故开始认为h3现在是一个内容 - 而且点击它就会崩溃，但无论如何我都无法使其工作。

$(function () {
    $('#myClicker').click(function () {
        var head = $(this).closest('h3');
        var content = head.next('div');
        content.add(head).fadeOut(300, function () {
            $(this).remove();
        });
    });

    $("#accordion").accordion({
        autoHeight: true
    });
    $("#accordion").accordion({
        collapsible: true
    });
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div id="accordion">
     <h3><a href="#">Section 1</a><input type="button" id="myClicker" value="delete" /></h3>

    <div>
        <p>Section 1 Content</p>
    </div>
    <h3><a href="#">Section 2</a></h3>

    <div>
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>

    <div>
        <p>Section 3 Content</p>
    </div>
    <h3><a href="#">Section 4</a></h3>

    <div>
        <p>Section 4 Content</p>
    </div>
</div>

UPD 1：经过一些实验，我最终得到了：

$('#myClicker').click(function(){
    event.stopPropagation();
    var head = $(this).closest('h3');
    var content = head.next('div');

        head.fadeOut(300,function(){
            head.remove();
            content.remove();
        });

});

Answer 1

这是一个有效的fiddle。

$(function() {
    $('#myClicker').click(function(){
      var head = $(this).closest('h3');
       var content = head.next('div');

     content.add(head).remove();
    });
    $("#accordion").accordion({ autoHeight: true});
    $("#accordion").accordion({ collapsible: true });
});

删除上一项时，Jquery Accordion会滑动下一个标题

1 个答案: