<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);
});
Related
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>
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>
If I have this html code:
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
As you see there are two <li> elements with the inactive class.
I tried to do this and I have
$("#tabs").children();
But how can I search the specific <li> without class inactive?
Thanks for any help
$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
</ul>
Use method .not()
Description: Remove elements from the set of matched elements.
Use :not() and :has() pseudo-class selectors.
$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");
console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 1 : Or without using jQuery :has() instead using parent() method.
$("#tabs > li > :not(.inactive)").parent()
console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.
$("#tabs > li > :not(.inactive)")
$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
You can use .not() function
$("#tabs").find('a').not('.inactive');
You can use following code
$('ul#list li:not([class])')
in your case [class] will be inactive
By using javascript we can complete this way:-
var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)
Jsfiddle link
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
I have looked for jQuery plugins but can't find any that do exactly what I want.
The nav is in two parts, the main nav:
<div id="nav">
<a href="" ><img src="/shell/img/nav/home_nm.gif" /></a><a href="" ><img src="/shell/img/nav/about_nm.gif" /></a><img src="/shell/img/nav/apply_nm.gif" /><img src="/shell/img/nav/contact_nm.gif" /><img src="/shell/img/nav/information_nm.gif" /><img src="/shell/img/nav/working_nm.gif" /><img src="/shell/img/nav/moveable_nm.gif" />
</div>
And then a sub nav:
<div id="sub_nav" >
<ul id="sub_home"><li>Courses on Offer</li><li>Work Placements</li><li>Blog</li></ul>
<ul id="sub_about"><li>Funding and Donations</li><li>Testimonials</li><li>Staff and Board</li></ul>
</div>
All I want to do is have sub_home or sub_about appear when home or about on the main nan is rolled over.
It is import that the sub nav is always positioned to the left, on the jquery plugins it tends to make a drop down under the button, so not hard left.
Can a plugin be recommended that will easilh achieve this as something must exist.
Don't use a plugin! It is very very very easy!
You can see the following snippets in action in this jsfillde.
Maybe it would help you to rearrange your html to a more semantic structure like this:
<nav>
<ul>
<li>
<a href=#>Menu 1</a>
<ul>
<li><a href=#>Submenu 1.1</a></li>
<li><a href=#>Submenu 1.2</a></li>
<li><a href=#>Submenu 1.3</a></li>
</ul>
</li>
<li>
<a href=#>Menu 2</a>
<ul>
<li><a href=#>Submenu 2.1</a></li>
<li><a href=#>Submenu 2.2</a></li>
<li><a href=#>Submenu 2.3</a></li>
</ul>
</li>
<li>
<a href=#>Menu 3</a>
<ul>
<li><a href=#>Submenu 3.1</a></li>
<li><a href=#>Submenu 3.2</a></li>
<li><a href=#>Submenu 3.3</a></li>
</ul>
</li>
</ul>
</nav>
Just hide your submenus initially using CSS like this:
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}