Question

我知道有一些帖子讨论如何在点击时保持Bootstrap菜单打开，但我的情况有点不同，我还找不到可行的解决方案。

我需要的是：当单击该菜单中的项目以显示模态时，保持下拉菜单打开。我的标记看起来像这样：

<!-- dropdown -->
<ul>
    <li class="createTag">
        <a class="createTagA" href="#tagInfoModal" role="button" data-toggle="modal">Create New</a>
    </li>
</ul>

<!-- modal -->
<div id="tagInfoModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header header-blue">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Tag Info</h3>
    </div>
    <div class="modal-body">
        <div class="box-content">
            <form action="#" method="POST" class='form-horizontal form-validate' id="tagInfoForm" data-bind="submit: saveTag">
                <div class="control-group">
                    <label for="nameOfTag" class="control-label">Tag *</label>
                    <div class="controls">
                        <input type="text" name="nameOfTag" id="nameOfTag" class="input-xlarge">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" onclick="createNewTag();">Save Tag</button>
    </div>
</div>

这里的计划是点击下拉菜单中的createTag锚点，模态显示出来。更重要的是，我希望下拉菜单在模态启动时保持打开状态，并在模态关闭时保持打开状态。默认行为是当模态打开时，下拉菜单消失，这不是我想要的。

我已尝试在某些在线答案中建议在锚点击事件处理程序中返回false / stop传播，而菜单以这种方式保持打开状态，它会打破模态 - 模式不再显示

因此，我阻止下拉菜单关闭的努力是这样的：

$(".createTagA").click(function() {
    return false;
});

我不熟悉Bootstrap。谁能给我一些提示？

谢谢！

Answer 1

我使用javascript代替html打开模态，并停止点击事件的传播。

Demo here

的Javascript

$(".createTagA").click(function(e) {
    e.stopPropagation();
    $("#tagInfoModal").modal('show');        
});

HTML 的

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
<ul class="dropdown-menu" role="menu">
    <li class="createTag">
        <a class="createTagA" role="button">Create New</a>
    </li>
</ul>
</div>
<!-- modal -->
<div id="tagInfoModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header header-blue">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Tag Info</h3>
    </div>
    <div class="modal-body">
        <div class="box-content">
            <form action="#" method="POST" class='form-horizontal form-validate' id="tagInfoForm" data-bind="submit: saveTag">
                <div class="control-group">
                    <label for="nameOfTag" class="control-label">Tag *</label>
                    <div class="controls">
                        <input type="text" name="nameOfTag" id="nameOfTag" class="input-xlarge" />
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" onclick="createNewTag();">Save Tag</button>
    </div>
</div>

显示模态时菜单仍处于打开状态，但是当关闭模态时，菜单也会关闭。我不确定这是你想要的行为。

打开模态时，保持Bootstrap 2.3.2下拉菜单打开

1 个答案: