my Javascript that is supposed to open the 2nd layer of my Navigation does not work and I dont know why it is not working. Am I overseeing something obvious? Its a bit warm in my office atm. :D
$('.submenu').click(function(e) {
e.preventDefault();
if ($(this).closest("ul .sub").hasClass("hide")) {
$(this).closest("ul .sub").removeClass('hide');
$(this).closest("ul sub").addClass('show');
}
else {
$(this).closest("ul sub").addClass('hide');
$(this).closest("ul sub").removeClass('show');
}
});
The HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="centering">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img id="navlogo" alt="trlololol" src="gfx/Logo_Friedhof_Bildmarke-01.svg"></a></li>
<li class="dropdown">
Dropdown<span class="nav-img"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="submenu dropdown-toggle">Next menu level<span class="nav-img"></span></li>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>
<li>One link</li>
</ul>
</li>
<li class="dropdown">
Dropdown32<span class="nav-img"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="submenu">Next menu level<span class="nav-img"></span></li>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>
You should nest your ul inside of your li like this:
<li class="submenu">Next menu level<span class="nav-img"></span>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>
</li>
Then you can do:
$('.submenu').click(function(e) {
$(this).children('ul.sub').toggleClass('hide')
});
fiddle: https://jsfiddle.net/hubkefw7/
Related
I have a standard Bootstrap (3.3.7) nav item with 2 dropdown menus. Upon loading the page, the first dropdown item in the nav should be exposed by default. When hovering over the second dropdown item, that item should now be the only exposed dropdown until the first is hovered over again. Clicking anywhere on the page should not close any dropdown menu, and clicking on the name of the dropdown (Dropdown #1, etc) must function as a link.
I currently have it so the nav is exposed by default and the nav switches on hover, but clicking anywhere on the page closes the dropdown and I do not know how to override this. Also, is there a better way to have the first item defaulted to open?
My code looks something like this:
$(document).ready(function() {
var $dropdown = $(".nav li.dropdown");
$dropdown.first().addClass('open');
$dropdown.hover(function() {
if (!$(this).hasClass('open')) {
$dropdown.removeClass('open');
$(this).addClass('open');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown #1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown #2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You can prevent the default action of hide.bs.dropdown while closing (removing open class) current dropdown on element click. It's enough to add:
$dropdown.on('hide.bs.dropdown', function (e) {
e.preventDefault();
})
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
And avoid to add open class to current dropdown if it has the class forceclose.
$(".nav li.dropdown").on('mouseenter', function (e) {
if (!$(this).hasClass('open')) {
$(".nav li.dropdown").removeClass('open');
if ($(this).is('.forceclose')) {
$(this).removeClass('forceclose');
} else {
$(this).addClass('open');
}
}
}).on('hide.bs.dropdown', function (e) {
e.preventDefault();
}).first().addClass('open');
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
How to make the bootstrap dropdown on hover and still make the main button a link like if i click the dropdown button instead of a dropdown it should go to a different page
Here is my HTML
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
Here is my JS
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Here is a code pen sample
https://codepen.io/anon/pen/boNGBY
Just remove the (data-toggle="dropdown") from your anchor tag().
Dropdown
I have a jQuery snippet that collapses the responsive navbar (in mobile mode) when a menu item is clicked.
$('.navbar-fixed-top').click('li', function() {
$('.navbar-collapse').collapse('hide');
});
However, I also have a couple of menu items with drop-down sub-menus and they have the Bootstrap class .dropdown assigned to them. I want the above function to exempt these dropdown menu items.
To that end, I would like to retrieve the class of the item being clicked in order to make a decision on whether to collapse the navbar.
I tried this but it didn't output anything.
$('.navbar-fixed-top').click('li', function() {
console.log($(this).class);
$('.navbar-collapse').collapse('hide');
});
I also tried this with similar results.
$('.navbar-fixed-top').click('li', function(event) {
console.log(event.target.class);
$('.navbar-collapse').collapse('hide');
});
What else can I try? Right now, my navbar collapses when the dropdown menu item is tapped on a mobile device even before the user has a chance to see the sub-items which is what I am trying to remedy.
In case anyone wants to take a look, here's the HTML:
<ul class="nav navbar-nav pull-right">
<li ng-class="{ active: isActive('/about')}"><a onClick="pagetop()" href="#about">ABOUT</a></li>
<li ng-class="{ active: isActive('/blog')}"><a onClick="pagetop()" href="#blog">BLOG</a></li>
<li><a onClick="pagetop()" href="#">PREMIUM</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
In jQuery, you can do:
$(this).attr('class');
which is equal to className in plain JS:
event.target.className;
Since target references the anchor, you need the class of its parent (which is the li element). Try clicking the first two items here (added dummy-classes for them):
$('.nav').click('li', function(e) {
alert(e.target.parentElement.className);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li class="aboutClass" ng-class="{ active: isActive('/about')}">ABOUT <--- click me
</li>
<li class="blogClass" ng-class="{ active: isActive('/blog')}">BLOG <--- click me
</li>
<li><a onClick="pagetop()" href="#">PREMIUM</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>CONTACT
</li>
</ul>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
Mudalali | Sidadiya.lk
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="top-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<?php echo $loginLink; ?>
<!-- Registe1r
Login-->
</div>
I placed this code in a seperate file not in index.php (i.e. root/PHP_INCLUDES/header.php).
I would be happy if someone can help me to find the error .
Thanks in advance
It seems your code is working fine please look at this fiddle and let me know if I am missing anything from your code or might you missed to put something...
http://www.bootply.com/130454
I have a database collection of documents, and I will like to display them on the screen. I am using bootstrap for my application. How can I create a drop-down menu showing the documents in that collection?
Have a look at this page. In short you do:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>