Bootstrap 3 Toggle-Menü
Ich bin mit 2 Bootstrap 3 nav-Menü in einer Seite. Wenn das Menü reagiert(Toggle Menu), Einer von Ihnen zu arbeiten, wenn ich auf das toggle-Button und der andere nicht arbeiten.
Wie kann ich dieses Problem lösen?
Hier sind die codes der Menüs.
Menü-1:
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="slideTrigger" href="#"><i class="glyphicon glyphicon-chevron-down"></i> <span>More From Intuit</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<i class="glyphicon glyphicon-search"></i>
</div>
</form>
<ul class="nav navbar-nav">
<li><a href="#">Security</a></li>
<li><a href="#">Cart</a></li>
<li><a href="#"><i class="glyphicon glyphicon-earphone"></i> +00 000 000 <i class=" glyphicon glyphicon-info-sign"></i></a></li>
</ul>
</div>
</nav>
Menü-2:
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse2" data-target=".navbar-collapse2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="" ></a>
</div>
<div class="navbar-collapse collapse navbar-collapse2 collapse2">
<ul class="nav navbar-nav left_buttons">
<li class="active"><a href="#">Products</a>
<ul>
<li><a href="">DropDown</a></li>
<li><a href="">DropDown</a></li>
<li><a href="">DropDown</a></li>
<li><a href="">DropDown</a></li>
<li><a href="">DropDown</a></li>
</ul>
</li>
<li><a href="#">Addons</a></li>
<li><a href="#">Checks</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul class="nav navbar-nav navbar-right right_buttons">
<li><a href="#" class="btn btn-default trial_button">Free Trial</a></li>
<li><a href="#" class="btn btn-primary signin_button">Sign In</a></li>
</ul>
</div>
</div>
</div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen
data-toggle="collapse"
stattdata-toggle="collapse2"
auf diebutton.navbar-toggle
im zweiten Menü.So
.navbar-collapse2
und.collapse2
Klassen sind nicht notwendigdiv.navbar-collapse
.Fügen Sie auch eine id zu
div.navbar-collapse
und machendata-target
imbutton.navbar-toggle
Punkt zu dieser id statt der Klasse. Auch wenn der Hinweis auf die Klasse funktioniert ok, es ist eine gute Praxis, verwenden Sie ids, wo es möglich ist, denn es verweist auf eine native javascript-MethodegetElementById
statt jQuery$('.class')
. Es macht Sie code arbeitet ein wenig schneller.