2

我熟悉 Bootstrap 的弹出框如何工作以及如何将其分配给特定的容器元素。但是，我有一种情况，我有多个由代码生成的元素，并且这些元素中的每一个都可能没有特定的预分配 ID。我在这里创建了这种情况的小提琴

HTML 代码：

<div class="btn-group">
    <button type="button" class="btn btn-info">Menu 1</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>

    </button>
    <ul class="dropdown-menu node-menu" role="menu">
        <li class="node-menu-item"> <a href="#" class="add-menu-item"><i class="glyphicon glyphicon-plus"></i> Add Child</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="edit-menu-item"><i class="glyphicon glyphicon-edit"></i> Edit Node</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="delete-menu-item"><i class="glyphicon glyphicon-trash"></i> Delete Node</a>

        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-info">Menu 2</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>

    </button>
    <ul class="dropdown-menu node-menu" role="menu">
        <li class="node-menu-item"> <a href="#" class="add-menu-item"><i class="glyphicon glyphicon-plus"></i> Add Child</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="edit-menu-item"><i class="glyphicon glyphicon-edit"></i> Edit Node</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="delete-menu-item"><i class="glyphicon glyphicon-trash"></i> Delete Node</a>

        </li>
    </ul>
</div>
<div id="add-popover-content" class="hidden">
    <form role="form" method="post" action="/add" id="add-form" class="form-inline">
        <input class="form-control" type="text" placeholder="Department name" name="data[Department][name]" id="department-name">
        <button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-ok"></i>
        </button>
    </form>
    <div id="validation-msg"></div>
</div>

JS代码：

$('.add-menu-item').popover({
    html: true,
    placement: 'right',
    title: 'Add New Node',
    content: function () {
        return $("#add-popover-content").html();
    },
    container: function () {
        return $(this).parents('div');
    }
});

问题：如何判断容器应该是包含 DIV 的父容器？看起来容器需要是一些特定的命名元素。感谢您的帮助

4

1 回答 1

1

工作示例：http: //jsfiddle.net/L7fjgwru/10/

您是否尝试过删除该container功能？该节点似乎在删除该container功能后出现。但是，您必须重新单击菜单才能看到该节点。不确定这是否是预期的结果。

$('.add-menu-item').popover({
    html: true,
    placement: 'right',
    title: 'Add New Node',
    content: function () {
        return $("#add-popover-content").html();
    }
});

示例输出

您也可以使用以下代码使其在单击“添加子项”后不会关闭菜单。

$('.dropdown-menu a.add-menu-item').click(function(e) {
    e.stopPropagation();
});

这里的例子：http: //jsfiddle.net/L7fjgwru/13/

于 2014-11-03T05:52:36.447 回答