I have a treeview structure created with css and jquery. To expand a node I want the user to click on a <span> within the <li> (it's an image) and not on the node itself.
So here is my HTML part :
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>
Here's the JS part for the clikc event on span (but it doesn't work) :
$( '.tree li.parent > span.expand' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
However, the following code works but by clicking on the <a> within the <li> :
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.
Please see this jsfiddle that a created for this question.
So why the click event on span does not work ?
The issue is with css. Tag a is overlapping your span. Replace padding with margin and everything will start working.
Upd.: Actually - remove display:block from your rules for a tag
fiddle: http://jsfiddle.net/8ucy1gjb/2/
You are missing a closing </li> tag:
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</li> <!-----I Was Missing!-->
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>
Instead of using padding use margin for this class
.tree li.parent > a {
padding: 0 0 0 28px;
}
replace it with :
.tree li.parent > a {
margin: 0 0 0 28px;
}
as it is now your a tag overlays the span.expand so it's not clickable.
Fiddle
in your CSS selector you have .tree li.parent > span.expand. This selector is wrong for your markup. What this is looking for is
<div class="tree">
<ul>
<li class="parent">
<span class="expand"></span>
</li>
</ul>
</div>
That > means direct child, which you don't have. Just remove that, and you should be fine.
$(".tree li.parent span.expand").on('click', function() {});
Edit As it was pointed out to me, I missed the top level <span class="expand">. The click event would work for that top level, but wouldn't work on any of the inner ones. I would still recommend changing the CSS selector if you'd like it to click through on all of them.
Related
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/
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
So, guys, basically what I need to find:
----> All <li> which has <ul> without ANY class.
In this example I would ONLY want the <li> parent of the commented <ul>:
HTML
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li> <!--------- Just Need This One ---------->
<a>Item 2</a>
<ul>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I'm aware of .not("[class]"), and so I tried something like:
$('#myList li').has('ul').not("[class]")
which obviously doesn't work because jQuery is looking for <li>'s which have a nested <ul> but doesn't have any class.
So, guys, can anyone please help? :)
Instead of using
$('#myList li').has('ul').not("[class]")
you can use
$('#myList > li').has('ul:not([class])')
you can also use this selector
$('#myList > li:has(ul:not([class]))')
$('#myList > li:has(ul:not([class]))').css('background' , 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Use filter() over li and then check for children ul without any class with .length,
$('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
//or $('> ul:not([class])',this) in case of direct <ul>
});
var $li = $('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
});
console.log($li)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Try $('#myList li ul').filter(':not([class])'):
console.log($('#myList li ul').filter(':not([class])').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I really hate that 'too short to be an answer' ....
$('#myList li > ul:not([class])')
Seems to be the simplest one that does the job ?
In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:
Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:
I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!
This is a snippet of the default code from Foundation site
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li>Item 1A Loooong
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
</ul>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 1B
</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A
</li>
<li>Item 2B
</li>
</ul>
</li>
<li>Item 3
</li>
<li><a href='#'>Item 4</a>
</li>
</ul>
Here is a fiddle of the default: http://jsfiddle.net/65017wc2/
Here is a possible fix to do this :
.dropdown.menu {
top: 0!important;
}
.dropdown.menu {
position: relative;
}
.dropdown.menu li {
position: static !important;
}
.dropdown.menu ul {
margin-top: -1px;
}
I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.
See this fiddle
I'm trying to solve an overflow problem in my slyding dropdown menu.
For slyding I'm using the als-js framework. The problem is, if I set the overflow:hidden attribute my dropdown menu is not visibly anymore.
If I just set the overflow-x:hidden I'm getting a scrollbar.
<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<li class='als-item active'><a href='index.html'>Home</a>
<ul>
<li class='final'><a href='#'>Test 1</a>
</li>
<li class='final'><a href='#'>Test 2</a>
</li>
</ul>
<li class=' als-item has-sub '><a href='#'>Products</a>
<ul>
<li class='final'><a href='#'>Product 1</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li class="als-item"><a href='#'>About</a>
</li>
<li class='als-item active'><a href='index.html'>Admin</a>
</li>
<li class='als-item active'><a href='index.html'>Route</a>
</li>
</ul>
</div>
jQUery:
$(document).ready(function () {
$("#cssmenu").als({
visible_items: 4,
scrolling_items: 2,
orientation: "horizontal",
circular: "yes",
autoscroll: "no"
});
});
Here is the link to my fiddle.
http://jsfiddle.net/9zapu02q/11/
Perhaps somebody could help me to find a solution.
SOLUTION
Your div.als-viewport must have a greater height... but you asl script is setting the div height, so you need to use " IMPORTANT " to override the value.
.als-viewport {
height: 300px !IMPORTANT;
...
}