Bootstrap Inline List with Dropdown

Bootstrap Inline List with Dropdown - javascript

I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.

You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle

If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle

Related

$event.stopPropagation() not working inside dropdown toggle

I'm trying to keep dropdown menu opened when I click on the second selector by using
$event.stopPropagation()
but it's not working as expected.
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a onclick="$event.stopPropagation()">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>
Please suggest is there any other way to handle this using CSS -keeping ''open' class active on click..

Try this hope it helps,thanks
$('.dropdown-menu').click(function(e){
console.log('List has been clicked')
})
$(".link").click(function(event){
event.stopPropagation();
});
.link
{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a class="link">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>

Dynamically set active tab with jquery

I'm trying to set a tab active dynamically. I have search the net but the solutions is not working.Here is my code.
<ul id="memnav" class="nav nav-tabs">
<li class="active">
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>
and in the script
var active_tab = sessionStorage.getItem('active_tab');
if(active_tab){
$("#memnav").tabs().tabs( "option", "active", active_tab);
}
But it throws this error
Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
I have also put the "ul" inside a "div" but it shows the same error

simply use addClass
add .eq() :https://api.jquery.com/eq/
$(document).ready(function(){
var i=0;//get from storrage
$("#memnav li").eq(i).addClass('active');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<ul id="memnav" class="nav nav-tabs">
<li>
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>

You can try this as well :)
$(document).ready(function(){
var active_tab = '#publication-tab';
$('#memnav').find('a[href="'+active_tab+'"]').parent().addClass('active');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<ul id="memnav" class="nav nav-tabs">
<li>
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>

Using jquery slice to get parent elements only

I have this code that I'm trying to figure. Basically what I need is to slice or copy only the parent elements which Program 1, Program 2, Program 3 and Program 4 inside the list and not including the child elements.
I can't seem to find an answer in my problem and I believe you cannot get specific elements using jQuery slice
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>

Make these changes to your code:
Change nonDegList to this: nonDegList = $('li a', nonDegMenu)
Now you can just append course to items like this: items.append(course)
See demo below:
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li a', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList;
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li>Sub Programs A</li>
<li>Sub Programs B</li>
<li>Sub Programs C</li>
<li>Sub Programs D</li>
</ul>
</li>
<li>
Programs 2
<ul>
<li>Sub Programs E</li>
<li>Sub Programs F</li>
<li>Sub Programs G</li>
<li>Sub Programs H</li>
</ul>
</li>
<li>
Programs 3
<ul>
<li>Sub Programs I</li>
<li>Sub Programs J</li>
<li>Sub Programs K</li>
<li>Sub Programs L</li>
</ul>
</li>
<li>
Programs 4
<ul>
<li>Sub Programs M</li>
<li>Sub Programs N</li>
<li>Sub Programs O</li>
<li>Sub Programs P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>

I'm looking for a way on how I can output or get the first level of lists which is Program 1, Program 2, Program 3 and Program 4 but not including the child lists or child elements inside of it.
As it appears you're interested in the text "which is Program 1.." and don't need the items themselves, you can extract this "first level" of lists into an array using:
var list = $("#header>ul>li>ul>li>a").map(function() {
return $(this).text();
}).get()
(this appears to be the second-level to me as the first level would be #header>ul>li>a and give just Programs).
Normally it would be better to add classes or different <h1> <h2> levels which would make finding the items easier and less brittle, but (as per comments) this is not an option.
You can then use .slice as needed. If you need the first, it would be:
list.slice(0,1);
this would be the same as:
list[0];
Note that .slice(0) will return all the items so has no effect. Omitting the second argument extracts through the end of the sequence (arr.length).
If you need the links themselves (the whole node, not just its text) then there's no need for map:
var list = $("#header>ul>li>ul>li>a");
items.append(list);
the purpose of .slice is for example I want items Program 2, Program 3 and Program 4. Excluding Program 1 from the list
You can use .slice against the jquery array, using the correct arguments.
To exclude the first (see code snippet for working example of this):
list.slice(1);
to get first 2 items:
list.slice(0,2)
More info on slice: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
//var list = $("#header>ul>li>ul>li>a").map(function() { console.log($(this).text()); return $(this) }).get()
var list = $("#header>ul>li>ul>li>a")
$("#course").append(list.slice(1))
#course a { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<hr/>
<div id='course'></div>
<hr/>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>

jQuery slideToggle doubling up..?

I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});

First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you

<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/

jQuery click function not binding to dynamic changed class

So using javaScript i set my last navigation link the class of 'contact'
$('#menu-main-menu li').last().addClass('contact');
Now i want to do a click function for this so i have tried:
$(document).on('click', '.contact', function(){
$('.contact-wrapper').show();
console.log('here');
});
Now this does not work and i do not see anything in the console.
Am i doing anything wrong here?
I have also tried to just do a simple
$('').click(function(){});
EDIT
<ul id="menu-main-menu" class="nav navbar-nav"><li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a></li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a></li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a></li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a></li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a></li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a></li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a></li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a></li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a></li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a></li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a></li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a></li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a></li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a></li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a></li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a></li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a></li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a></li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a></li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a></li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a></li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a></li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a></li>
</ul>
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).on('click', 'contact', function(){
$('.contact-wrapper').show();
console.log('here');
} );
$('.overlay').click(function(){
$('.contact-wrapper').hide();
});
})( jQuery );

Where's .content-wrapper and .overlay?
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).on('click', 'contact', function() {
$('.contact-wrapper').show();
console.log('here');
});
$('.overlay').click(function() {
$('.contact-wrapper').hide();
});
})(jQuery);
<ul id="menu-main-menu" class="nav navbar-nav">
<li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a>
</li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a>
</li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a>
</li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a>
</li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a>
</li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a>
</li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a>
</li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a>
</li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a>
</li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a>
</li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a>
</li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a>
</li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a>
</li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a>
</li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a>
</li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a>
</li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a>
</li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a>
</li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a>
</li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a>
</li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a>
</li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a>
</li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a>
</li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a>
</li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a>
</li>
</ul>

please use $(document).find to bind click event of dynamically appended class
please update your js code as below
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).find('.contact').click( function(){
$('.contact-wrapper').show();
console.log('here');
} );
$('.overlay').click(function(){
$('.contact-wrapper').hide();
});
})( jQuery );
refer working fiddle at here

Use code like this, add jquery file & start with document ready function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="nav navbar-nav"><li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a></li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a></li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a></li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a></li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a></li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a></li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a></li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a></li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a></li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a></li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a></li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a></li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a></li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a></li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a></li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a></li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a></li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a></li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a></li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a></li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a></li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a></li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a></li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu-main-menu li').last().addClass('contact');
jQuery(document.body).on('click', 'li.contact', function(){
jQuery('.contact-wrapper').show();
console.log('here');
} );
jQuery('.overlay').click(function(){
jQuery('.contact-wrapper').hide();
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap Inline List with Dropdown - javascript

Related

$event.stopPropagation() not working inside dropdown toggle

Dynamically set active tab with jquery

Using jquery slice to get parent elements only

jQuery slideToggle doubling up..?

jQuery click function not binding to dynamic changed class

Categories

Resources