Bootstrap 在鼠标悬停时切换打开菜单并在单击时关闭

Question

我有带下拉菜单的切换按钮，我的要求是：

下拉菜单应该在鼠标悬停时打开，但当鼠标从那里离开时（在鼠标悬停上）不应该再次关闭
下拉菜单应该在点击打开下拉菜单后显示的关闭按钮时关闭

这是我的 HTML 代码：

<div class="row pull-right hamburger-position">
        <div class="col-md-12">
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-menu-hamburger"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </div>
        </div>
    </div>

那么我该如何维护这两种情况？

Answer 1

请从您的角度编写一些示例代码，您可以根据需要编写一些示例代码。因为，

[熟能生巧]:)

$('.hamburger-position .my-dropdown').hover(function(){
  $(this).addClass('open').css({
    'border':'1px solid red'
  });
});

.my-dropdown{
  width:auto;
  float:left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
<div class="row hamburger-position">
  <div class="col-md-12">
    <div class="dropdown my-dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">
        <i class="glyphicon glyphicon-menu-hamburger"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a>
        </li>
        <li><a href="#">CSS</a>
        </li>
        <li><a href="#">JavaScript</a>
        </li>
      </ul>
    </div>
  </div>
</div>
  
</div>

Answer 2

我在这里添加了一些 jQuery，现在可以使用了！

$(document).ready(function() {
        $('.dropdown-toggle').click(function() {
            if ($('.dropdown-menu').css('display') == 'block') {
                $('.dropdown-menu').css('display', 'none');
            } else {
                $('.dropdown-menu').css('display', 'block');
            }
        });

        $('.dropdown-toggle').mouseover(function() {
            $('.dropdown-menu').css('display', 'block');
        })
    });

但我还是想用 AngularJS.....!

还有一个要求是： * 打开下拉切换按钮时应替换为关闭按钮 (x)

Bootstrap 在鼠标悬停时切换打开菜单并在单击时关闭

Bootstrap Toggle open menu on hover and close on click

toggle

drop-down-menu

twitter-bootstrap-3