什么功能调用bootstrap4中的“ navbar-toogle”按钮？

Question

 $('#navbar-collapse').on('show.bs.collapse', function () { $("html").click(function() { //OPTION 1 document.getElementById("navbar-collapse").classList.remove('show'); //OPTION 2 //$('#navbar-collapse').hide(); //OPTION JAIME //$('#navbar-collapse').collapse('toggle'); }); $('#navbar-collapse').click(function (e) { e.stopPropagation(); }); });

 .bg-ecs-white{ background: #fff !important; } .navbar-ecs .navbar-brand { color: #34219e; } .navbar-ecs .navbar-brand:hover, .navbar-ecs .navbar-brand:focus { color: #ff2069; } .navbar-ecs .navbar-nav .nav-link { color: #34219e; } .navbar-ecs .navbar-nav .nav-link:hover, .navbar-ecs .navbar-nav .nav-link:focus { color: #ff2069; } .navbar-ecs .navbar-nav .show > .nav-link, .navbar-ecs .navbar-nav .active > .nav-link, .navbar-ecs .navbar-nav .nav-link.show, .navbar-ecs .navbar-nav .nav-link.active { color: #00e1e1; } .navbar-ecs .navbar-toggler { color: #ff2069; border-color: #34219e; } .navbar-ecs .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 32, 105, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /***************NAV-SUBLINK**************/ @media (min-width: 992px){ .navbar-expand-lg .navbar-nav .nav-sublink { padding-right: .5rem; padding-left: .5rem; } } .navbar-ecs .navbar-nav .nav-sublink { color: #ff2069; } .navbar-ecs .navbar-nav .nav-sublink:hover, .navbar-ecs .navbar-nav .nav-sublink:focus { color: #ff2069; text-decoration: none; } .nav-sublink, .navbar { padding: .5rem 1rem; } .dropdown-menu { background-image: linear-gradient(#fff, #c6ffff); /*to right,*/ border: none; } .dropdown-toggle::after, .dropup .dropdown-toggle::after { content: none; } /*botones submenú navbar*/ .btn-link { color: #34219e; } .btn-link:hover { color: #ff2069; text-decoration: none; } #intro { height: 100%; background-color: blue; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

 <html> <head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar"> <div class="container-fluid"> <div class="logo"> <a class="navbar-brand" href="#">LOGO</a> </div> <button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sec 1</a> </li> </ul> </div> </div> </nav> <div class="container-fluid"> <div id="intro"> <br> <br><br> <br><br> <br> <p class="text-white text-center"> CONDITION the menu can only be opened with the button, to close, when the user touches outside the menu</p> <p class="text-white text-center">1.open menu 2.touch background blue 3.open menu 4. :(</p> <br> </div> </div> </body> </html>

I am trying to hide the navbar menu when a user clicks outside of a specific div. 当用户在特定div之外单击时，我试图隐藏导航栏菜单。 The function of identifying the click outside the div responds well, but the navbar does not respond again as it would like. 识别div外部点击的功能可以很好地响应，但是导航栏不会再次响应。

What I am trying to do, is that when the user presses outside the div, he makes the call to the same function that hides / shows the navbar menu. 我正在尝试做的是，当用户在div之外按下时，他调用了隐藏/显示导航栏菜单的相同功能。 And I would like to know: What function invokes the "navbar-toogle" button in bootstrap4? 我想知道：哪个函数调用bootstrap4中的“ navbar-toogle”按钮？

I am trying all these options, but I can not find the key, each of them gives a different error. 我正在尝试所有这些选项，但是我找不到密钥，它们每个都给出不同的错误。

Jquery / JavaScript jQuery / JavaScript

    $('#navbar-collapse').on('show.bs.collapse', function () {
$("html").click(function() {

        //OPTION 1
        //document.getElementById("navbar-collapse").classList.remove('show'); // The "navbar-toogle" button does not respond

       //OPTION 2
       // $('#navbar-collapse').hide(); // Problem, the style = display: none remains active (there is no way to remove it)
            //$('#navbar-collapse').css('display','none'); //I also try to assign the manual value of none first, and once it is hidden, it performs the following function (IT DOES NOT WORK)
        //$('#navbar-collapse').removeAttr('style'); //If I add this line, style is completely removed, and the hide () function does not respond

//OPTION JAIME  
      $('#navbar-collapse').collapse('toggle'); //The menu opens always touch where the user touches. OPTION NOT VALID

        // OPTION 3 
        //document.getElementById("btnTog").classList.add('collapsed'); //Behavior OK
        //$("btnTog").attr("aria-expanded","false"); // DO NOT CHANGE THE VALUE, it always stays "true"
        //document.getElementById("navbar-collapse").classList.remove('show'); // OK Behavior - Problem: If I press the Hide / Show Menu button (btnTog) It does not hide

       // OPTION 4, 5, 6, ... TESTING OTHER VARIANTS without success
        //$("navbar-collapse").toggle();
        //$("#navbar-collapse").css("display","");
        //$("#navbar-collapse").css('display','');

        //$('#navbar-collapse').get(0).style.display='';
        //$('#navbar-collapse').css('display',null);
            //getElementById("navbar-collapse").removeAttribute("style");
            //getElementById("navbar-collapse").removeAttribute("display");
            //getElementById("navbar-collapse").removeAttribute("none");
        //document.getElementById("#navbar-collapse").style.display = null;
        //document.getElementById("navbar-collapse").classList.remove('display');

    //document.getElementById("navbar-collapse").classList.add('collapsing');
});

$('#navbar-collapse').click(function (e) {
    e.stopPropagation();
});

PHP / HTML PHP / HTML

    <nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar"> 
  <div class="container-fluid">
<div class="logo">
  <a class="navbar-brand" href="#">LOGO</a>
</div>
    <button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.php">Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Sec 1</a>
            </li>          
          </ul>
    </div>
    </div>
    </nav>

Answer 1

Holy crap, I had the biggest brain fart. 糟糕，我的脑子最大。 I don't know why I was thinking dropdown when it was clearly collapse. 我不知道为什么当下拉列表明显崩溃时我还在想下拉列表。

https://getbootstrap.com/docs/4.3/components/collapse/#methods https://getbootstrap.com/docs/4.3/components/collapse/#methods

$('#navbar-collapse').collapse('hide');

This is probably what you need. 这可能就是您所需要的。

I also have a codepen that I created: 我也创建了一个Codepen：

https://codepen.io/jamierytlewski/pen/YgJzEj https://codepen.io/jamierytlewski/pen/YgJzEj

什么功能调用bootstrap4中的“ navbar-toogle”按钮？

问题描述

Jquery / JavaScript jQuery / JavaScript

PHP / HTML PHP / HTML

1 个解决方案

解决方案1
1 2019-03-19 15:06:17

什么功能调用bootstrap4中的“ navbar-toogle”按钮？

问题描述

Jquery / JavaScript jQuery / JavaScript

PHP / HTML PHP / HTML

1 个解决方案

解决方案1 1 2019-03-19 15:06:17

解决方案1
1 2019-03-19 15:06:17