... and menu item stays active. But from beginning: I have a site with a responsive top menu with bootstrap (works, after minimize menu toogle to dropdown button) and a side menu as nav-pills, which choose the tab-pane. Due to keep responsive I use CSS (xs-toogle and xs-collapse) to hide the side menu after minimum width and show a button as a dropdown. Here the relevant code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3">
<div class="dropdown">
<!-- show after >=768 width -->
<button type="button" class="btn btn-default dropdown-toggle xs-toggle" id="dropmenu" data-toggle="dropdown">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-pills nav-stacked dropdown-menu" role="menu" aria-labelledby="dropmenu" aria-haspopup="true" aria-expanded="false">
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem1" data-toggle="pill">Item1</a></li>
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem2" data-toggle="pill">Item2</a></li>
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem3" data-toggle="pill">Item3</a></li>
</ul>
<!-- hide after <768 width -->
<ul class="nav nav-pills nav-stacked xs-collapse" id="TabItems">
<li class="active"><a href="#goitem1" data-toggle="pill">Item1</a></li>
<li><a href="#goitem2" data-toggle="pill">Item2</a></li>
<li><a href="#goitem3" data-toggle="pill">Item3</a></li>
</ul>
</div> <!-- dropdown -->
</div> <!-- col -->
<div class="col-xs-10 col-sm-7">
<div class="maincontent">
<div class="tab-content">
<div class="tab-pane active fade in" id="goitem1">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div> <!-- col -->
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
<div class="tab-pane fade" id="goitem2">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div>
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
<div class="tab-pane fade" id="goitem3">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div>
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
</div> <!-- tab-content -->
</div> <!-- maincontent -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
Everything seems fine, after minimizing the window the nav-pills menu dispappear and the button for dropdown appears. I can press the button, the dropdown appears, I can click a menu entry and the itemsection will be displayed. But I can only click every menu item only once. The item in the dropdown stays active and no more action is possible with these items. Due to my weakness with Javascript I use only bootstrap with html and css and I have no more idea what is going wrong. Thank you in advance for giving me hints to solve the problem and get a better understanding what happen in background. Best Regards, Ralf
I added the CSS:
/* Seitenmenu Angebote*/
/* +++ HAUPTSEITE +++ */
.maincontent{
background-color: #ffffff;
color: #000;
opacity: 0.9;
padding: 5%;
border: 10px outset #d22814;
}
.xs-collapse {
display: none;
visibility: hidden;
}
.xs-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.xs-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.btn-default.xs-toggle .icon-bar {
background-color: #888;
}
@media (min-width: 990px) {
.xs-toggle {
display: none;
visibility: hidden;
}
.xs-collapse {
display: block;
visibility: visible;
}
}
.nav-pills > li > a {
font-size: 1.2em;
color: #d22814;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #ffffff;
background-color: #d22814;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
background-color: #fae5e2;
}
.flyer {
/*color: #605f5f;*/
color: #58595b;
font-weight: bold;
font-size: 1.8em;
}
... and menu item stays active. But from beginning: I have a site with a responsive top menu with bootstrap (works, after minimize menu toogle to dropdown button) and a side menu as nav-pills, which choose the tab-pane. Due to keep responsive I use CSS (xs-toogle and xs-collapse) to hide the side menu after minimum width and show a button as a dropdown. Here the relevant code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3">
<div class="dropdown">
<!-- show after >=768 width -->
<button type="button" class="btn btn-default dropdown-toggle xs-toggle" id="dropmenu" data-toggle="dropdown">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-pills nav-stacked dropdown-menu" role="menu" aria-labelledby="dropmenu" aria-haspopup="true" aria-expanded="false">
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem1" data-toggle="pill">Item1</a></li>
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem2" data-toggle="pill">Item2</a></li>
<li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem3" data-toggle="pill">Item3</a></li>
</ul>
<!-- hide after <768 width -->
<ul class="nav nav-pills nav-stacked xs-collapse" id="TabItems">
<li class="active"><a href="#goitem1" data-toggle="pill">Item1</a></li>
<li><a href="#goitem2" data-toggle="pill">Item2</a></li>
<li><a href="#goitem3" data-toggle="pill">Item3</a></li>
</ul>
</div> <!-- dropdown -->
</div> <!-- col -->
<div class="col-xs-10 col-sm-7">
<div class="maincontent">
<div class="tab-content">
<div class="tab-pane active fade in" id="goitem1">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div> <!-- col -->
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
<div class="tab-pane fade" id="goitem2">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div>
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
<div class="tab-pane fade" id="goitem3">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 class="flyer">CONTENT</h1>
</div>
<div class="col-xs-0 col-sm-6 deco">
<h1 class="flyer">CONTENT</h1>
</div>
</div> <!-- row -->
</div> <!-- tab-pane -->
</div> <!-- tab-content -->
</div> <!-- maincontent -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
Everything seems fine, after minimizing the window the nav-pills menu dispappear and the button for dropdown appears. I can press the button, the dropdown appears, I can click a menu entry and the itemsection will be displayed. But I can only click every menu item only once. The item in the dropdown stays active and no more action is possible with these items. Due to my weakness with Javascript I use only bootstrap with html and css and I have no more idea what is going wrong. Thank you in advance for giving me hints to solve the problem and get a better understanding what happen in background. Best Regards, Ralf
I added the CSS:
/* Seitenmenu Angebote*/
/* +++ HAUPTSEITE +++ */
.maincontent{
background-color: #ffffff;
color: #000;
opacity: 0.9;
padding: 5%;
border: 10px outset #d22814;
}
.xs-collapse {
display: none;
visibility: hidden;
}
.xs-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.xs-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.btn-default.xs-toggle .icon-bar {
background-color: #888;
}
@media (min-width: 990px) {
.xs-toggle {
display: none;
visibility: hidden;
}
.xs-collapse {
display: block;
visibility: visible;
}
}
.nav-pills > li > a {
font-size: 1.2em;
color: #d22814;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #ffffff;
background-color: #d22814;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
background-color: #fae5e2;
}
.flyer {
/*color: #605f5f;*/
color: #58595b;
font-weight: bold;
font-size: 1.8em;
}
- Could you post the CSS? – Alvaro Commented Nov 13, 2016 at 15:30
- I added it at the post. – Ralf Commented Nov 13, 2016 at 15:46
- I think the code still needs the javascript to understand what is happening jsfiddle/3qea59yn/1 – Alvaro Commented Nov 13, 2016 at 15:56
-
THere is not closed
<div>at line 50 of html-chunk. I think that's a cause of your issue. – Banzay Commented Nov 13, 2016 at 15:58 - I closed the <div>, was a copy and paste mistake. The original code was checked with browser debugger, no issue found. – Ralf Commented Nov 13, 2016 at 16:07
3 Answers
Reset to default 2After many tries and a lot of research I found not really the reason but a working solution. I added after the JQuery script the following code:
$(function () {
$('.dropdown-menu a').click(function (e) {
$('.active').removeClass('active');
});
});
With this function it is fine enough for me. Best Regards, Ralf
For me, adding attribute data-target="#navItemGame" to the <a> and to the #id of my dropdown-menu class solves my problem. Simple adding of data-target and id="myID" is awesome.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-
target="#navItemGame">GAME</
<ul class="dropdown-menu" id="navItemGame">
<li><a href="#">MODE 1</a></li>
<li><a href="#">MODE 2</a></li>
<li><a href="#">MODE 3</a></li>
</ul>
</li>
So, This is shame for today's Big Fake Brands like BOOTSTRAP Anyway, If you dont like this Dirty solution, please dont give me Negativ Score U must get your negativ scores to Bootstrap
Base on Bootstap document, A navbar with toggle menu item Must be somthing like this code:
<ul class="nav nav-tabs">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Filters</a>
<ul class="dropdown-menu">
<li><a href="#">Most Sealers</a></li>
<li><a href="#">Newest</a></li>
</ul>
</li>
<li class="active"><a href="#">Group 1</a></li>
<li><a href="#">Group 2</a></li>
<li><a href="#">Group 3</a></li>
</ul>
But this not work correctly, Then i change this sample as Below and Worked:
<ul class="nav nav-tabs" id="ulnav">
<li class="dropdown" style="float: right;">
<a id="lk1" href="#" onclick="BShameMenu();">Filters <span class="caret"></span></a>
<ul class="dropdown-menu" id="lk1ul">
<li><a href="#" onclick="jQuery('#lk1').click();">Most Sealers</a></li>
<li><a href="#" onclick="jQuery('#lk1').click();">Newest</a></li>
</ul>
</li>
<li class="active"><a href="#" onclick="BShameMenu2(jQuery(this));">Group 1</a></li>
<li><a href="#" onclick="BShameMenu2(this);">Group 2</a></li>
<li><a href="#" onclick="BShameMenu2(this);">Group 3</a></li>
</ul>
<script>
function BShameMenu() {
jQuery('#lk1ul').toggle();
}
function BShameMenu2(el) {
if (jQuery('#lk1ul').is(':visible')) { jQuery('#lk1').click(); }
jQuery('#ulnav li').removeClass('active');
jQuery(el).parent().addClass('active');
}
</script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745113603a4611993.html
评论列表（0条）