I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
Related
<ul class="level1">
<li>
<span>category name</span>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<li>
</ul>
I want selected ul that is with level2 class to move to top of the
ul.level1 li but it should be after ul.level1 li span.
Actually this is regarding move elements in bootstrap tree
http://jsfiddle.net/umutc1/eyf9q87c/
See this JSFiddle, think it's what you're after: JSFiddle
Essentially, you hook onto the event that triggers the move, find the thing you want to move, find where you want to move it to and use the .after() jq function to do the move.
HTH
$(function(){
$("ul.level2").click(function(e){
var clickedUL = $(e.target).closest("UL");
$("ul > li > span").after(clickedUL);
});
});
I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.
Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');
Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^
Here's the demo of what I've got until now.
What I'm trying to reach is to have a list of info hidden just to be shown whenever you click on it.
It all consists on a ul list with ul children nested inside of its li elements and so.
Until now it does what it should: Hides or shows the ul child when you click on a li parent.
But the problem is that when I click on a li inside a ul which is already inside a li, this parent ul hides.
How can I avoid this to happen? Is there a better way of doing this?
I'm not really that new to js but I'm still learning and I would like to see what you, guys, can teach me.
Thanks in advance.
PD: If it is not too much to ask, I would really a appreciate a pure js answer so I can learn more of it (:
Your issue arrises from event propagation. What was happening in your fiddle was that when the child was clicked the event was also propagating to the parent and hiding the whole thing. Thats why you might notice that the second time the parent li was opened the child would be open also. Here is a link to an explanation of the different ways events propagate in different browsers.
For everything but IE version <9. This modification to your fiddle should make your code work. The only difference being that I am stopping the event from propagating from your child li to the parent li, with
event.stopPropagation();
Check out Mozilla's event.stopPropagation docs for more info.
<div class="clpsble-area">
<ul onclick="clpsble(event)">
<li class="collapser">Rand Stuff 1
<div class="clpsble-sec hide">
<ul>
<li class="collapser">Rand Stuff 1.1
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.1</li>
<li class="collapser">Rand Stuff 1.1.2
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.2.1</li>
<li>Rand Stuff 1.1.2.2</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Rand Stuff 1.2</li>
</ul>
</div>
</li>
<li>Rand Stuff 2</li>
</ul>
</div>
<script>
function clpsble(e){
for(el in e.target.children)el.style.display=el.style.display==='hidden'?'block:'hidden';
}
</script>
I have a menu inside a menu. The first menu anchor(class = menu-container) which contains the submenu has a hover state with styles attached to it. I want these styles of the parent anchor to remain active when the mouse is also over the submenu.
I cant use jQuery, as I am only restricted to pure javascript.
The code is as following:
<ul>
<li>
List Item
</li>
<li>
<a class="menu-container" href="#">List Item</a>
<ul class="submenu">
<li>list item</li>
</ul>
</li>
</ul>
NOTE: The client has requested the menu to be displayed and hidden using pure CSS. I know that using jQuery to achieve the solution for this would be easier, but I am restricted.
Thanks
"Attach the menu-container class to the parent "li" item...
The ":hover" on the li won't work in IE6 and below but shall work in all modern browsers.
I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the "div".
Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.
my example
Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});
Make it a child of the <div>, then it won't cancel the event when you leave it.
Also I should note that it's more semantic to make a navigation out of nested lists (such as
Category ItemItem
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.
http://jsfiddle.net/dttdB/13/
You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.