Выпадающее подменю не останется открытым

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();
    });