Develop Reference

How can I prevent a menu link from redirecting on first click if it has subitems

I have a menu with multiple dropdowns and each li tag has a link.
The HTML looks like this:
<ul class="menu nav navbar-nav">
<li class="first leaf active active">Home</li>
<li class="expanded dropdown has-children">
About <span class="caret"></span>
<ul class="dropdown-menu depth-1">
<li class="first leaf has-sub-children">Why Somerset College?</li>
<li class="leaf has-sub-children">History</li>
<li class="last expanded dropdown has-sub-children">
Governors <span class="caret"></span>
<ul class="dropdown-menu depth-2">
<li class="first leaf">Board of Governors</li>
<li class="last leaf">PA Commitee</li>
</ul>
</li>
</ul>
</li>
<li class="expanded dropdown has-children">
Admissions <span class="caret"></span>
<ul class="dropdown-menu depth-1">
<li class="first last leaf has-sub-children">Scholarships & Bursaries</li>
</ul>
</li>
<li class="expanded dropdown has-children">
Pre Preparatory <span class="caret"></span>
<ul class="dropdown-menu depth-1">
<li class="first leaf has-sub-children">Aftercare</li>
<li class="last leaf has-sub-children">Letter From the Head</li>
</ul>
</li>
<li class="collapsed">Preparatory</li>
<li class="expanded dropdown has-children">
High School <span class="caret"></span>
<ul class="dropdown-menu depth-1">
<li class="first expanded dropdown has-sub-children">
Senior Academics <span class="caret"></span>
<ul class="dropdown-menu depth-2">
<li class="first leaf">High School - Subject Choices</li>
<li class="leaf">Matric Results</li>
<li class="leaf">Student Development Unit</li>
<li class="last leaf">High School - House, Grade and Tutor System</li>
</ul>
</li>
<li class="expanded dropdown has-sub-children">
Student Leadership <span class="caret"></span>
<ul class="dropdown-menu depth-2">
<li class="first leaf">Social Responsibility</li>
<li class="leaf">The President's Award</li>
<li class="last leaf">Exchange Programme</li>
</ul>
</li>
<li class="leaf has-sub-children">Outdoor Education</li>
<li class="leaf has-sub-children">Sports</li>
<li class="last expanded dropdown has-sub-children">
Culture <span class="caret"></span>
<ul class="dropdown-menu depth-2">
<li class="first leaf">Music</li>
<li class="last leaf">Art</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">Cambridge</li>
<li class="leaf">Old Oaks</li>
<li class="last leaf">Contact Us</li>
</ul>
With jQuery I managed to the following:
When I click on a first level menu item, it prevents from redirecting and the sub item drops. Then if I click again in it, or in its subitem, the page redirects to its respective url.
However, If I click on the first level, then inside that subitem I click on a link that also has sub-items, after clicking on the link from the last level, the page redirects to the wrong url.
If I click under about->governors->board of governors. The redirect goes to Governors page.
Which means that my js is only working for first level dropdowns.
Initially, my js looked like this:
$('li.dropdown').click(function(e) {
if ($(window).width() < 1800) {
if (!$(e.target).closest('ul').is('.dropdown-menu.depth-1')) {
e.preventDefault();
if (!$(this).hasClass('open')) {
$(this).addClass('open');
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find('a').attr('href');
}
}
}
});
Then I edited to the above in order to work for second level:
$('ul.menu > li.dropdown').addClass("has-children");
$('ul.menu > li.dropdown > ul > li').addClass("has-sub-children");
$('li.dropdown.has-children').click(function(e) {
if ($(window).width() < 1800) {
if (!$(e.target).closest('ul').is('.dropdown-menu.depth-1')) {
e.preventDefault();
if (!$(this).hasClass('open')) {
$(this).addClass('open');
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find('a').attr('href');
}
}
}
});
$('li.expanded.dropdown.has-sub-children').click(function(e) {
if ($(window).width() < 1800) {
if (!$(e.target).closest('ul').is('.dropdown-menu.depth-2')) {
e.preventDefault();
if (!$(this).hasClass('open')) {
$(this).addClass('open');
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find('a').attr('href');
}
}
}
});
How can I make the dropdowns work regardless of the sub level?

When it is cliecked for the first time, you can store it in its data, and the second time redirect:
$('li.dropdown.has-children').click(function(){
if($(this).data("clicked")=='1')
{
//it's been clicked before and redirect
}
else
{
//this is the first time it is clicked
$('li.dropdown.has-children').data("clicked", "0"); // this one is clicked so
//reset previously clicked ones.
$(this).data("clicked", "1");
}
});

Bootstrap Vertical Menu dropdown highlights NEXT menu item but not sub menus of CURRENT PARENT

all...
So here's my BOOTSTRAP code for a vertical DROP DOWN side bar menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown" id="dropdown1">
Projects <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">In Development</li>
<li class="page-scroll">Pre-Production</li>
<li class="page-scroll">Production</li>
</ul>
</li>
<li>Showcase</li>
<li>Dream Team</li>
<li>Contact</li>
<li class="dropdown" id="dropdown2">
My<br>Entertainment <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">Projects</li>
</ul>
</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div><!-- /.navbar-collapse -->
So here are the images which best displays what's occurring:
Then when you hover on SUB MENU, the NEXT MENU is highlighted...
This is very confusing...
Any thoughts?
Thanks

Protractor - how to select heavily nested dropdown element?

The site I am testing has a dropdown menu with the following code:
<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.user">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-ng-bind="authentication.user.displayName" class="ng-binding">Testy McTesterson</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
View Profile
</li>
<li>
Edit Profile
</li>
<li id="h_manage_social_accounts">
Manage Social Accounts
</li>
<li data-ng-show="authentication.user.provider === 'local'" class="">
Change Password
</li>
<li class="divider"></li>
<li>
Signout
</li>
</ul>
</li>
</ul>
How can I get protractor to click the links like "Signout" within the dropdown menu?

First, you need to click the toggle button, then choose the element from the dropdown:
element(by.css('li.dropdown > a.dropdown-toggle')).click();
element(by.linkText('Signout')).click();

Prevent collapsing when clicking sub-item in navigation

I have build a stacked navigation with several sub-menus.
<ul class="nav nav-pills nav-stacked">
<li data-toggle="collapse" data-target="#subnav">
Nav
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>
When click on the parent, the sub-menus will open nicely. However, when I click on any of the sub-items, the parent menu will close again. How can I prevent this?
Edit: Try out on jsFiddle

One way is to extract the trigger element out of the collapsible...
Bootply
HTML :
<ul class="nav nav-pills nav-stacked">
<li>
<span data-toggle="collapse" data-target="#subnav">Nav</span>
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>

You could do something like this :
$("#subnav").on( "click.bs.collapse.data-api", function(e) {
e.stopPropagation();
});

generic function in javascript using backbone and jquery

I'm using backbone and Jquery and I have a backbone menu with a bunch of click able links.
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li class="dropdown">
<a data-toggle="dropdown" id="n-btn" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li> dropdown1</li>
<li> dropdown2</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
I'd like to be able to do the following make a generic function such that I can click any of the links in the menu bar div above and have one generic function to handle all of the clicks.
Currently I have to create a separate function using jQuery for each id/herf
$(window).load(function(){
$("#dropdown1").on('click.dropdown.data-api', function(e) {
e.preventDefault();
alert("test");
});
});