How to select li without children in a multilevel menu with jQuery?

How to select li without children in a multilevel menu with jQuery? - javascript

I have a multilevel (tree) menu built with HTML <ul> and <li>. This is a sample of that markup:
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My goal is to select all <li> nodes that has no children. I want to get the "leaves" of the tree, those elements that have no children, the final nodes.
How can I do this with jQuery?

You should be able to use either of the following:
$(".dl-menu li:not(:has(li))")
or
$(".dl-menu li:not(:has(ul))")

I assume you want all links:
$('li:has(a):not(:has(ul))')
$('li:has(a):not(:has(ul))').each(function(){
console.log(
$(this).html()
);
});
es-console-wrapper{
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>

One thing to note here - in your example, NONE of your nodes are empty. They all have children. Some have an "a" tag, and some have a "a" AND "ul" tag. Based on your example, it looks like you want to select all "li" elements that have NO "ul" tags as children. This is called a "parent selector", and cannot be done with CSS alone (unfortunately). But it can be done in javascript, and since you want an answer in javascript, this should work:
$('li:not(:has(ul))').addClass('link');
You can further refine your query as needed.
jsFiddle: https://jsfiddle.net/mspinks/68tguxza/

If you're looking only for li element without ul children then you can do this.
$('li:not(:has(ul))')

Related

Remove class from element inside bootstrap popover

I'm using a bootstrap popover to show a list of available actions for a list of recipients.
Popover:
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
The above is triggered by the below HTML:
<a class="btn btn-link text-white" tabindex="0" role="button" data-html="true" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="auto" data-content=" #include('recipient.actions-popover') ">
Then issue is when I try to run javascript on the popover it isnt working. For example, if I try and run:
$(document).on('change', '.checkable', function(e) {
console.log("testing");
$(".popover-item").removeClass('disabled');
});
The disabled class does not get removed although I do see the testing console log.
Can anyone help get the above working?

If you just want to remove a class when the checkbox change, this works fine :
$(".checkable").change(function() {
$(".popover-item").removeClass('disabled');
});
.disabled{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
<label>Checkable</label> <input type="checkbox" name="recipient[3]" class="checkable" contactid="3">

Get top parents on click of last child element as custom text in Multilevel UL LI traversal

With below html data can i get output like below !!
Directory structure:
10000
22222
TEST1
|-- 10000_old
| `-- 55555
|-- 10001
`-- 10006
TEST2
|-- 10002
|-- 10005
`-- 11000_old
`-- 20001
TEST3
|-- 10003
|-- 10004
|-- 11000_old
| `-- 10001
`-- 12000_old
`-- 10000
HTML Data :
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Output data :
onclick of 22222, get output as text like "22222".
onclick of 55555, get output as text like "TEST1/10000_old/55555"
onclick of 10005, get output as text like "TEST2/10005"
onclick of 50000, get output as text like "TEST3/12000_old/50000"

You can use .parentsUntil("ul.file-tree") and pick each li. On each iteration fetch the id of first a inside it.
$(".treeclass a").on("click", function(){
var path = [];
$(this).parentsUntil("ul.file-tree").each(function(){
if($(this).is("li"))
path.push($(this).children("a").eq(0).attr("id"));
});
var actualPath = path.reverse().join("/");
console.log(actualPath);
});
$(".treeclass a").on("click", function(){
var path = [];
$(this).parentsUntil("ul.file-tree").each(function(){
if($(this).is("li"))
path.push($(this).children("a").eq(0).attr("id"));
});
var actualPath = path.reverse().join("/");
console.log(actualPath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Use parentsUntil, forEach, filter and map
$( "a" ).click( function(e){
e.preventDefault();
var value = $(this).parentsUntil( ".file-tree" ).filter( (s, i) => i.nodeName == "LI" ).map( (s, i) => i.querySelector( "a" ).innerHTML ).get().join( "/" );
console.log( value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>

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>

Bootstrap Inline List with Dropdown

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

My own accordion javascript does not work.

<div id="wrapDesktopNavBar">
<ul class="desktopNavBar" id="accordion">
<li>
<form class="search">
<input type="text" placeholder="Search here" required>
</form>
</li>
<li><a class="firstLevel" href="#home" onclick="callthis()">Main Category 1</a></li>
<li><a class="firstLevel" href="#">Main category 2</a>
<ul>
<li><a class="secondLevel" href="#">Sub Category 1</a>
<li><a class="secondLevel" href="#">Sub Category 2</a>
<li><a class="secondLevel" href="#">Sub Category 3</a>
<li><a class="secondLevel" href="#">Sub Category 4</a>
<li><a class="secondLevel" href="#">Sub Category 5</a>
<li><a class="secondLevel" href="#">Sub Category 6</a>
</ul></li>
<li><a class="firstLevel" href="#">Main Category 3</a></li>
<li><a class="firstLevel" href="#">Main category 4</a>
<ul>...
This is my html and my javascript to get the sub categories to slide up:
$("#accordion > li").on('click', function () {
if (false == $(this).next('ul').is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
but when i clicked the main category, the sub categories won't come out. it's supposed to slide out nicely like the jquery ui accordion. Please help. I'm not very sure why the sub categories are not showing.

FIDDLE
$('.firstLevel').click(function () {
$(this).next().toggle(300);
});

Develop Reference

JavaScript is the programming language of the Web.

How to select li without children in a multilevel menu with jQuery? - javascript

You should be able to use either of the following: $(".dl-menu li:not(:has(li))") or $(".dl-menu li:not(:has(ul))")

If you're looking only for li element without ul children then you can do this. $('li:not(:has(ul))')

Related

Remove class from element inside bootstrap popover

Get top parents on click of last child element as custom text in Multilevel UL LI traversal

jQuery click function not binding to dynamic changed class

Bootstrap Inline List with Dropdown

My own accordion javascript does not work.

Categories

Resources