Bootstrap3中的下拉菜单事件

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" class="menu-item">菜单项1</a></li>
    <li><a href="#" class="menu-item">菜单项2</a></li>
    <li><a href="#" class="menu-item">菜单项3</a></li>
  </ul>
</div>

<script>
$(document).ready(function() {
  // 绑定下拉菜单显示事件
  $('.dropdown').on('shown.bs.dropdown', function() {
    // 在菜单显示时添加逻辑操作
    console.log("下拉菜单显示了");
  });
  
  // 绑定下拉菜单隐藏事件
  $('.dropdown').on('hidden.bs.dropdown', function() {
    // 在菜单隐藏时添加逻辑操作
    console.log("下拉菜单隐藏了");
  });
  
  // 绑定菜单项点击事件
  $('.menu-item').on('click', function() {
    // 在菜单项点击时添加逻辑操作
    console.log("菜单项被点击了");
  });
});
</script>