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

请从您身边写一些示例代码，您尝试根据需要制作一些代码。因为，

[实践令人满意]：）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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在悬停时切换打开菜单，然后单击关闭

2 个答案: