이것은 하위 메뉴 드롭 다운이 아니며 범주는 그림과 같이 클래스 li입니다.
반응 형 메뉴 (템플릿은 한 페이지 일뿐 임)에서 범주를 선택하면 클릭 할 때 탐색 축소를 자동으로 숨기고 싶습니다. 템플릿에는 한 페이지 만 있기 때문에 탐색으로 사용할 수도 있습니다. 나는 그것에 영향을 미치지 않는 해결책을 찾고 있습니다. 메뉴의 HTML 코드는 다음과 같습니다.
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Carousel Demo</a>
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<!-- dropdown -->
</ul>
<!-- /.nav -->
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
답변
이 시도:
$('.nav a').on('click', function(){
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
$('.navbar-toggler').click(); //bootstrap 4.x
});
답변
다음 과 같이 각 링크 에서 btn-navbar
( data-toggle="collapse" data-target=".nav-collapse.in"
) 의 두 가지 속성을 복제합니다 .
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
</ul>
</div>
에서 부트 스트랩 4 Navbar를 , in
변경되었습니다 show
구문이 될 수 있도록 :
data-toggle="collapse" data-target=".navbar-collapse.show"
답변
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$('.navbar-toggle').trigger( "click" );
}
});
});
답변
기본 collapse.js 메소드 ( V3 docs , V4 docs ) 를 사용하는 것이 좋습니다 .
$('.nav a').click(function(){
$('.nav-collapse').collapse('hide');
});
답변
중복 코드를 작성하지 않고도 더 우아하게 탐색 data-toggle="collapse"
및 data-target=".nav-collapse"
속성을 탐색 자체에 적용하는 것입니다.
<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
매우 깨끗하고 JavaScript가 필요하지 않습니다. nav a
요소에 굵은 손가락에 대한 충분한 패딩이 있고 사용자가 항목을 e.stopPropagation()
클릭 할 때 클릭 이벤트 버블 링을 방지하지 않는 한 훌륭하게 작동 nav a
합니다.
답변
업데이트
<li>
<a href="#about">About</a>
</li>
에
<li>
<a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>
이 간단한 변화는 저에게 효과적이었습니다.
답변
내비게이션 요소뿐만 아니라 사용자가 신체의 아무 곳이나 클릭 할 때마다 내비게이션을 닫아야합니다. 메뉴가 열려 있지만 사용자가 페이지 본문을 클릭한다고 가정하십시오. 사용자는 메뉴가 닫히기를 기대합니다.
또한 토글 버튼이 표시되어 있는지 확인해야합니다. 그렇지 않으면 메뉴에 점프가 표시됩니다.
$(document).ready(function() {
$("body").click(function(event) {
// only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
$('.navbar-collapse').collapse('toggle');
}
});
});