如何在jquery

Question

我正在使用Anchor标签在bootstrap中创建的Dropdowm菜单。如何处理该菜单的事件。

我浏览了一些他们提供过诸如此类活动的网站，

- ＆GT; hide.bs.dropdown - ＆GT; show.bs.dropdown

请有人解释一下。

Answer 1

此示例将说明。

1. show.bs.dropdown - 调用show instance方法时会立即触发此事件。
2. shown.bs.dropdown - 当用户看到下拉列表时将触发此事件（将等待CSS转换完成）​​。
3. hide.bs.dropdown - 调用hide实例方法时会立即触发此事件。
4. hidden.bs.dropdown - 当用户隐藏下拉列表时将触发此事件（将等待CSS转换完成）​​。

Get More reference form Offcial Bootstrap

＆＃13;
＆＃13;
$('#myDropdown').on('show.bs.dropdown', function() {
    console.log("Dropdown show");
  });

$('#myDropdown').on('shown.bs.dropdown', function() {
  console.log("Dropdown shown (wait for CSS Transition)");
});

$('#myDropdown').on('hide.bs.dropdown', function() {
  console.log("Dropown hide");
});

$('#myDropdown').on('hidden.bs.dropdown', function() {
  console.log("Dropdown hidden (wait for CSS Transition)");
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="dropdown" id="myDropdown">
        <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
                    Dropdown trigger
                    <span class="caret"></span>
                </a>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;