I would like to add a class to all the elements in my menu that ARE NOT being hovered over. Instead of
$('#nav li').hover(function(){$('ul',this).toggleClass('active')
I would like all the other elements in the unordered list to be changed. Any simple way?
HTML
<ul>
<li>State Level</li>
<li>National Level</li>
<li>Community Level</li>
</ul>
</li>
<li> Research</li>
<li> Contact Us
</li>
</ul>
$('#nav li').hover(function(){$('ul',this).not($(this)).addClass('blah')
Related
How could I add toggle class? When I click on anchor tag it should add class to only next sibling element ( .treeUlChild ). i tried a lot and try to find solution but couldn't. I am new and this is my first project in javascript.
here is my html code.
<div id="treeList" class="treeDiv">
<ul class="treeUl">
<li>
GUIDELINES
<ul class="treeUlChild treeLevel2">
<li> Guidlines 1</li>
<li> Guidlines 2</li>
<li> Guidlines 3</li>
<li> Guidlines 4</li>
</ul>
<!-- End Child Ul -->
</li>
<li>
AFTER-SALES
<ul id="test" class="treeUlChild treeLevel2">
<li>xyz</li>
<li>
def
<ul class="treeUlChild treeLevel3">
<li>
ASSETS
<ul class="treeLevel4">
<li>DIGITAL</li>
<li>OOH</li>
<li>POS</li>
<li>PRINT</li>
<li>SOCIAL GIF</li>
<li>SOCIAL VIDEOS</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End treeUl -->
</div>
This is my javascript code.
document.querySelector('#treeList ul li a').addEventListener("click", function(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
});
One issue is nextSibling returns a node object, it's better you use nextElementSibling which returns an element node. The other issue is querySelector will always return the first element with the specified selector, so the changes will always be reflected on the same element whichever link you clicked. You may rather use querySelectorAll which returns all the elements as a node list, and loop through each element and apply the changes. Another thing is, it's better to use event.target to get clicked element and rather than using a selector again.
document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
event.target.nextElementSibling.classList.toggle('done');
}));
There is very simple way using Bootstrap by the way.
But if you want to do that with pure Javascript, you're on the right way to it.
So first, transform your query selector into a object e.g:
var el = document.querySelector('#treeList ul li a');
forEach method, querying the single object clicked in the array of multiple objects:
el.forEach(yourFunctionName());
Add functions to your elements:
<li><a onclick="yourFunctionName()" href="#"> Guidlines 1</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 2</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 3</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 4</a></li>
ps: you can simplify this.
Structure your function:
function myFunctionName(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
}
I'm embarrased to ask, but I'm running into a very primitive problem.
I have a very simple menu consisting of the follwing
<div id="mySidenav">
<li>
<a></a>
<ul>
<li></li>
<li></li>
<li></li>
</uL>
</li>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
now I have very simple jquery to hide all the inner UL's which is $("#mySidenav li > ul").hide();
To toggle the inner ul's I use
`$("#mySidenav li").click(function(){
$(this).children("ul").toggle();
})`
However, now I run into a problem. Whenever I click an inner-UL, the parent UL 'takes' the click and closes itself.
How do I fix this?
It's because the event bubbles up the DOM tree.
If list element A is contained within list element B, and
element A is clicked, the click event fires for element A and then it
will bubble up and fire for element B. This occurs because technically
you are clicking both elements.
To prevent this behaviour, stop the propagation by using event.stopPropagation
$("#mySidenav li").click(function(event){
$(this).children("ul").toggle();
event.stopPropagation();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenav">
<li>
<a>parent 1</a>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</li>
<li><a>parent list 2</a>
<ul>
<li><a>list 4.1</a>
<ul>
<li>list 4.1.1</li>
<li>list 4.1.2</li>
</ul>
</li>
</ul>
</div>
I want to hide a text when I hover in my menu1 and on its sub menus too.
How can I do it ?
Here is my code :
http://jsfiddle.net/bulina/F2R7F/
<p id="text"> <b>This is the text that will hide on hover</b> </p>
<div id="menu4">
<ul>
<li id="list"><center><a href="#" >Menu1</a></center>
<ul>
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
<li>Sub4</li>
<li>Sub5</li>
<li>Sub6</li>
<li>Sub7</li>
<li>Sub8</li>
</ul>
</li>
<li><center>Menu2</center>
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li><center>Menu3</center>
<ul>
<li>Sub7</li>
<li>Sub8</li>
</ul>
</li>
</div>
We can use jQuery hover method to handle both mouseEnter and mouseLeave events
by using its callbacks respectively.
$(selector).hover(mouseIn, mouseOut)
In above question, two different jQuery methods of hover and mouseout plays an independent role on same #text element. Hence their working doesn't give expected output.
All credits to #anton.
Refer fiddle from #anton comment above : jsfiddle.net/Alfie/F2R7F/2
I am using mootools-more.1817.js...this is my HTML structure:
<ul id="categories">
<div id="admin">Admin Controls</div>
<li class="selected">Test
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Test 2
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Top Links
<ul>
<li id="article">Link 1</li>
<li id="article">Link 2</li>
<li id="article">Link 3</li>
<li id="article">Link 4</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Lame Links
<ul>
<li id="article">Link 9</li>
<li id="article">Link 10</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Awesome Links
<ul>
<li id="article">Link 11</li>
<li id="article">Link 12</li>
</ul>
</li>
</ul>
So I want to do two things:
Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.
I have done this:
window.addEvent('domready', function(){
new Sortables('#categories', {
clone: true,
revert: true,
opacity: 0.7
});
});
What that does is drags JUST the li, and not the children of the li.
How do I achieve those?
Thanks.
First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.
Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.
I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.
I have an uncertain amount of nested ul and li tags like:
<ul>
<li>5
<ul>
<li>2
<ul>
<li>1
</li>
<li>4
<ul>
<li>3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>7
<ul>
<li>9
<ul>
<li>14
<li>
</ul>
<li>11
</li>
</ul>
</li>
</ul>
I'm using Kendo ui treeview and it returns me the element where the l was dropped (it might be a element inside the li because I have some spans in each one).
What I need is to know the previous and next li through DOM and Javascript to save the new order of elements.
Can anyone help please?
You didn't specify which event you were using, but it should be "dragend". That way you should be able to detect the parent li and then just get all of it's children to reorder.
Check out this fiddle here. Is this closer to what you are looking for?
http://jsfiddle.net/burkeholland/CrRUz/
Using jQuery:
var parentLi = $(e).closest('li');
var previousLi = parentLi.prev()
var nextLi = parentLi.next();
Where e is the element receiving the drop.