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>
Related
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
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.
I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.
Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});
you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')
I experience an issue where .slideToggle() or .slideUp()/.slideDown() stop functioning when the container div data get updated by Ajax. Consider this initial structure:
<ul class="main-container">
<li>
<div class="data-container"><!--display:none; through CSS-->
<p>empty</p>
</div>
</li>
</ul>
And the slideToggle script:
$('.main-container li').click(function(){
$(this).find('div.data-container').slideToggle();
});
Then there is an Ajax update like this:
$('.main-container').replaceWith(data)
The updated structure becomes:
<ul class="main-container">
<li>
<div class="data-container"><!--display:none; through CSS-->
<ol>
<li>data1</li>
<li>data2</li>
</ol>
</div>
</li>
</ul>
Then the slideToggle stops functioning until I reload the page. Is there any work around rather than using .slideToggle() or .slideUp()/.slideDown() ?
Simply use:
$(document).on('click', '.main-container li', function(){
$(this).find('div.data-container').slideToggle();
});
The issue is that when you replace .main-container the original event handler is no longer in effect. To get around this you set the event listener on document and ask it to run the function when a click event is triggered on an li inside the .main-container div.
Here it is working: http://jsfiddle.net/wXdbL/3/
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.