I have an <li> in which are TWO <ul>.The second <ul> is hidden and should be shown when i click inside the first <ul>.
I've tried this : $(me).parent().parent().find("ul").slideToggle();
$(me) is an instance of this and the <li> Wrapper-Element.
The Problem is now that the hidden <ul> is shown but the visible <ul> hides.
And it should not hide that.I want the hidden <ul> to show and hide right when i am clicking on the visible <ul>.
Another thing to mention is that i am using this code in an success function of an ajax call :
success:function(data){
$(me).parent().parent().find("ul").slideToggle();
}
Maybe someone can help me.I probaply just need to adjust the .find() but i dont know how to do it ....
You can use CSS child selectors in jQuery. The following fiddle demonstrates that if you click inside the first UL, the second will slide.
$('li ul:first-child li').click(function(){
$(this).parent().parent().find("ul:nth-child(2)").slideToggle();
});
https://jsfiddle.net/mqjvt2nu/2/
There are a bunch of ways to do this. You can specify classes or id's and target that way. You can use the .siblings() function in jQuery. You could also use the .next() or .prev() functions.
Try using the .not method:
$(me).parent().parent().find("ul").not(':visible').slideToggle();
Related
After applying uniform.js the jQuery doesn't work.
The jQuery was like this. The original.
Now the html code changed after applying the uniform.js but the jQuery is not working anymore. The uniform wrapper added wrappers to the checkbox maybe that's why is not working.
here is the new code: New Code
Yes, previously, your checkbox and your UL were siblings, so .next() worked. Now, however your checkbox is wrapped up and further down in the tree. So this:
$selexcta(this).next('.child-list')...
won't find the next ul.
I might be missing something, but I'd suggest not using .next() to traverse the tree. Rather, when a checkbox is clicked, deselect all checked check boxes. Then go 'up' the tree from the checkbox to the nearest li using
$(this).closest('li')
Then down one to the nearest ul
$(this).closest('li').find('ul')
then you can make that visible:
$(this).closest('li').find('ul').slideToggle('fast').addClass('mm');
You should be able to get away without using the .method() function at all.
Hope that helps.
I'm trying to add a class to an element specified within my HTML from clicking on a button.
HTML:
<div id="servicenext"><p class="four">next</p>
Script:
$('#servicenext a').click(function(){
$('ul.navigation a').removeClass('active');
$(*the div in the href*).addClass('active');
});
I'm hoping to have code that's dynamic. Basically it'll work by adding the class to any element specified in the a href.
This is because i have quite a handful of these and do not wish to code them individually.
EDIT:
Thanks James! that's great!
But I do have to apologize, i was confused myself at what I was asking for!
What I'm actually looking to addClass to was actually the li in ul.navigation a
So if I'm thinking right, im trying to do this:
by clicking onto the servicenext button,
the code gets the id of the div in the href
the addClass is applied to the li with the same href
I'm guessing there should be if else statements somewhere, forgive me, i'm not really a programmer.
the gibberish i came up with is:
$('#servicenext a').click(function(){
$('ul.navigation a').removeClass('active');
$($(this).attr("href").find($('ul.navigation li a').attr("href"))).addClass('active');
});
});
Since the value of the href attribute is already a valid ID selector, you can simply use the value of the attribute:
$($(this).attr("href")).addClass('active');
Note that you have to get the actual attribute value. The native DOM property returns an actual URL, not just the value of the attribute.
Here's a working example.
I have two custom dropdown lists that have the same markup. I need to have only one show at a time. Right now, I'm able to open both at the same time. Both should also close when I click off the list.
The same markup for both lists is required, so I can't use unique ID's or additional classes to make this happen.
Here is a link to my fiddle example: http://jsfiddle.net/dg7Lc/29/
Any help would be greatly appreciated, thanks!
-D
Consider adding a data attribute such as 'active' via jquery when you click on one of them, then hide all those that have that attribute.
$('.custom-select').eq(0).hide() will hide the first one.
Use .show() instead of .hide() to show (obviously) and change the index to (1) to get the second one.
First thought would be if you could wrap a span or div around either or both and use that to get around the "same markup" limitation. Other than that, though, I'd suggest using order in page - use .next() and .prev() to get between them, and something like
$("div.custom-select").get(0)
or
$("div.custom-select").get(1)
to select them from outside.
edit: if you can run them off of something like an onmouseover, onchange, or whatnot, it's even easier - the one that's changing will be passed into the function as the "this" parameter. Just hide both, and show this, or show both and hide this.
edit2: similarly, once you have one of them hidden properly - well, that one will be hidden, and respond to the ":hidden" selector. Use that to distinguish between them (and save the distinction as a jquery variable) before you go showing or hiding anything else
Hide the first:
$('.custom-select').first().hide();
Hide the second:
$('.custom-select').last().hide();
And then put these lines of code where needed.
http://jsfiddle.net/dg7Lc/31/
Basically, closing the others:
$('.custom-select').not(this).find('ul').slideUp('fast');
And for closing when clicking outside the box, I used this piece of code but it's a bit dirty:
$("body").click(function(e) {
var should = true;
for($e = $(e.target); should && $e.length; $e = $e.parent()) {
should = !$e.is(".custom-select");
}
if(should) {
$('.custom-select').find('ul').slideUp('fast');
}
});
You can bind a click to the document, that looks to see if they clicked on the custom-select or the document outside it and hides any open lists as it should:
$(document).click(function(ev){
if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});
Updated JSFiddle
Can someone explain this to me? I'm trying to understand exactly why drop down lists inside a li tag work okay but when using a form the menu disappears when clicked anywhere.
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
}
It works in combo with:
$("html").click(function() {
menu.find('.active').removeClass('active');
});
Full code with menu example:
http://jsfiddle.net/e4yy4/
This bit of code
$("html").click(function() {
menu.find('.active').removeClass('active');
});
would remove the active class of the menu and so hide it when ever a click is detected anywhere on the page.
But
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();});
Would override the first piece of code when the click is detected in the drop down list.
So you can add the below code to override the first piece of code so it also cancel the hiding when clicking in the form.
menu.find('ul > form').bind('click', function (event) {
event.stopPropagation();});
Just like this
http://jsfiddle.net/Quincy/e4yy4/3/
You also want to stop form events propagating to html (should probably be document).
Change the selector to select descendent form elements too.
jsFiddle.
If you change the first check to menu.find('ul li>*') then it seem to work.
I think that line was only handling clicks on links, and your form elements aren't links.
<form> is an element just like any other, as such, it should be eligible for selection using the CSS selectors (which are called by the find() function).
You need to change your selector to include the <form> tag and possibly change the selector to pickup on <input> elements instead of <a>.
For more information on jQuery selectors, please see: http://api.jquery.com/category/selectors/
I want to add a slide up affect with jQuery to a DIV when a link inside of the DIV is clicked, but the problem i am running into is the class of the DIV's are defined by a loop. So, i can't define the DIV class in the jQuery line, because each DIV class is different and i cannot determine ahead of time what they are. I am trying to use .parent and .child but I am not sure how to go about this. Is this making any sense?
Bind to the click of the element you want (in this case I just used a simple anchor element). Then find the first parent that is a div and perform the slideUp() effect.
$('a').click(function() {
$(this).parents('div:first').slideUp();
});
You can see it work here: http://jsfiddle.net/XNnSp/
Let me know if that's what you are looking for http://jsbin.com/ehoza3
$('a').click(function() {
$(this).parent().slideUp();
});
Two (most obvious) ways
FIRST
If your tree is always defined in terms of depth you could access your parent DIV doing just that:
$(this).parent().parent().parent().slideUp();
SECOND
Add an additional class that doesn't clash with dynamic ones and do this:
$(this).closest(".some-custom-class").slideUp();