时间戳

首页 > 解决方案 > 什么函数调用 bootstrap4 中的“navbar-toogle”按钮？

javascript - 什么函数调用 bootstrap4 中的“navbar-toogle”按钮？

问题描述

$('#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>

当用户在特定 div 之外单击时，我试图隐藏导航栏菜单。识别div外点击的功能反应很好，但是导航栏没有再如愿的反应。

我想要做的是，当用户在 div 外部按下时，他会调用隐藏/显示导航栏菜单的相同功能。我想知道：什么函数调用bootstrap4中的“navbar-toogle”按钮？

我正在尝试所有这些选项，但我找不到关键，每个选项都会给出不同的错误。

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

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

标签： javascriptjqueryhtmlcss

解决方案

天哪，我放了最大的脑屁。我不知道为什么当它明显崩溃时我在想下拉。

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

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

这可能是您需要的。

我还创建了一个 codepen：

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

推荐阅读