下拉子菜单不会保持打开状态答案

【问题标题】：Dropdown submenu wont stay open下拉子菜单不会保持打开状态
【发布时间】：2019-10-31 14:10:10
【问题描述】：

我试图让我的下拉菜单仅在点击时打开。目前，我可以单击打开下拉菜单，但是当我将鼠标移动到子菜单或其他任何地方时，子菜单就会消失。

我曾尝试使用 e.stopPropagation 但没有成功。

是否有我可以使用的 CSS 或 Javascript 解决方案来提供帮助。

HTML

<div class="container">
    <ul class="nav navbar-nav" id="myUlList">
        <li id="search-box" class="dropdown dropdown-search">
            <a class="menu-anchor" href="javascript:;">
            <i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
            <div class="dropdown-menu" id="myDropDown">
                <div class="row">
                    <div class="col-xs-6 col-md-4">
                        <label for="activityCode">Activity Code</label>
                        <input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
                    </div>
                    <div class="col-xs-6 col-md-4">
                        <label for="awardId">Grant Number</label>
                        <input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
                    </div>
                    <div class="col-xs-6 col-md-4">
                        <label for="granteeName">Grantee Name</label>
                        <input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
                    </div>                                            
                </div>
            </div>
        </li>     
    </ul>
</div>

$('#myUlList').on({
    "click":function(e){
        e.stopPropagation();
    }
});
$('#myDropdown').on({
    "click": function (e) {
       e.stopPropagation();
    }
});

【问题讨论】：

@j08691 是的，我是
如果你使用引导程序的例子。保持打开状态是nav 菜单的默认行为。我会将他们的示例与您的代码进行比较，以查看是否存在差异。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

使用<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 在 Bootstrap 中打开/关闭下拉菜单。不需要下拉菜单的 JQuery 代码。当然 jquery.min.js 和 bootstrap.min.js 是必需的。

<div class="container">
  <ul class="nav navbar-nav" id="myUlList">
    <li id="search-box" class="dropdown dropdown-search">
      <a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
         <i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
      </a>
      <div id="myDropDown" class="dropdown-menu">
        ...
      </div>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

我不认为你的 jquery 是有效的语法。试试这个在点击时触发一个函数。

$('#myUlList').on("click", function(e) {
        e.stopPropagation();
    });
$('#myDropdown').on("click", function(e) {
        e.stopPropagation();
    });

【讨论】：