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>

Answer 2

我无法识别您的jquery为有效语法。尝试此操作以触发点击功能。

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

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

2 个答案: