Question

我已经创建了响应式引导菜单，并添加了jQuery代码来隐藏下拉菜单（如果我们在div（togglebar）之外单击）。但是问题是一旦我在div外部单击以关闭切换栏，它就不会显示切换栏单击后关闭下拉菜单后，仍正确显示十字符号。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-header">
        <button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
            <div id="navbar-hamburger">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <div id="navbar-close" class="hidden">
                <span class="glyphicon glyphicon-remove"></span>
            </div>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
</nav>

jQuery：

<script type="text/javascript">
    $(function() {
        $('#ChangeToggle').click(function() {
            $('#navbar-hamburger').toggleClass('hidden');
            $('#navbar-close').toggleClass('hidden');  
        });
     });
</script>
<script>
    $(document).on('click',function(){
        $('.collapse').collapse('hide');
        $('#navbar-hamburger').toggleClass('show');
        $('#navbar-close').toggleClass('hidden'); 
    })
</script>

Answer 1

尝试一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
                <div id="navbar-hamburger">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <div id="navbar-close" class="hidden">
                  <span class="glyphicon glyphicon-remove"></span>
                </div>
            </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        </nav>
</body>

</html>

 <script type="text/javascript">
        $(function() {
          $('#ChangeToggle').click(function() {
            $('#navbar-hamburger').toggleClass('hidden');
            $('#navbar-close').toggleClass('hidden');  
          });
        });
    </script>
    <script>

        $(document).on("click", function(event){
        var $trigger = $(".navbar");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $('.collapse').collapse('hide');
        $('#navbar-close').addClass('hidden');
        $('#navbar-hamburger').removeClass('hidden');
        }            
    });
    </script>

让我谈谈您的问题。实际上，您正在触发整个文件，包括导航栏。这就是为什么您的导航栏也要切换类。尝试折叠导航栏并在导航栏外部单击时切换按钮（导航栏元素除外）

Answer 2

在点击汉堡包按钮时，您将类别切换为“隐藏”。

$('#navbar-hamburger').toggleClass('hidden')

但是，当您单击文档时，会切换类“显示”

$('#navbar-hamburger').toggleClass('show')

对我来说这没有意义。每次我猜都应该切换同一个班级。

在div下拉菜单之外单击时隐藏，但未显示切换

2 个答案: