单击按钮时附加到垂直手风琴 jquery

Append to vertical accordion on button click jquery

我有一个水平标签,在里面,我有一个垂直标签功能。在垂直选项卡中,我提供了一个名为 Add More 的按钮,如下所示:

<button id="addMore" type="button">Add More</button>

单击按钮后,我想将新选项卡附加到前一个选项卡。

按钮上的点击方法:

$('#addMore').on('click', function() {
    $('#vtabs ul li').last().append('<li><a href="#option1">Option 1</a></li>');
    $('#vtabs div').last().append('<div id="option1">dsg</div>');

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

Html 部分:

<div id = "htabs-outer">
    <h1>htabs-outer</h2>
    <ul>
        <li><a href="#htab-outer-2">Horizontal Tab 2</a></li>
    </ul>

    <div id = "htab-outer-2">
        <h2>Htab outer 2 content</h2>
        <div id="vtabs">
            <h1>Vtabs</h1>
            <ul>
                <li><a href="#vtab-1">Vertical Tab 1</a></li>
                <li><a href="#vtab-2">Vertical Tab 2</a></li>
                <li><a href="#vtab-3">Vertical Tab 3</a></li>
            </ul>
            <div id="vtab-1">
                <h2>Vtab 1 content</h2>
            </div>
            <div id="vtab-2">
                <h2>Vtab 2 content</h2>
            </div>
            <div id="vtab-3">
                <h2>Vtab 3 content</h2>
            </div>
        </div>
        <button id="addMore" type="button">Add More</button>
    </div>
</div>

这确实追加到最后一个 li 元素,但无法正常运行。

我希望如果单击按钮,它应该附加到垂直选项卡并且还应该附加其对应的 div

我犯了什么错误?

这是fiddle你可以看看

首先,您需要使用 after() 添加新标签,因为 append() 将其放在现有标签结构中,这是不正确的。其次,您还需要在选项卡上调用 refresh 以添加所需的样式和事件。试试这个:

$(function () {
    $("#htabs-outer").tabs();

    var $vtabs = $('#vtabs').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $vtabs.find('> ul > li').removeClass("ui-corner-top").addClass("ui-corner-left");

    $('#addMore').on('click', function () {
        $vtabs
            .find('ul li:last').after('<li><a href="#option1">Option 1</a></li>').end()
            .find('div:last').after('<div id="option1">dsg</div>').end()
            .tabs('refresh').addClass("ui-tabs-vertical ui-helper-clearfix").end()
            .find("> ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
});

Updated fiddle

另请注意,您的 click 处理程序应位于 $(function() {}) 处理程序内。