javascript - 下拉子菜单不会保持打开状态

Question

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

我尝试使用 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>

JS

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

Answer 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>