I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..
Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle
$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.
Related
$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>
How can affect click event only ul tag not all li with jQuery?
<!-- HTML -->
<ul class="wrap">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
I tried jquery like this.But it doesnt work.
//Javascript
jQuery("ul.wrap").not(jQuery("ul > li")).click(function(){
//fire only ul
});
How can we do this?
You can simply do it with this code:
jQuery('.wrap').click(function (event) {
if ( !$(event.target).is( "li" ) ) {
console.log('ul clicked!');
}
});
You can see an example with background colors that shows the ul and the li here: http://jsfiddle.net/S67Uu/2/
Events 'bubble' up the DOM to their parent elements. What you need to do is attach the event to the ul, and another event on the child li elements which uses stopPropagation():
jQuery("ul.wrap")
.on('click', function(){
// do something...
})
.on('click', 'li', function(e) {
e.stopPropagation();
});
I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});
fiddle
I have in index.html:
<div data-role="fieldcontain" id="Container">
<ul id="my_ul" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Text" data-inset="true">
<li class="ui-screen-hidden">12</li>
<li class="ui-screen-hidden">123</li>
<li class="ui-screen-hidden">1234</li>
</ul>
</div>
js:
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
//$(this).hide();
});
So, when I click on li, the text from li go to the input. If I use hide - that element dont apears, when I delete a sting in input.
I need - click on li, text from li apears in input, all dropdown li hides, but if I deleted string from input, li apears. How to do that?
Thanks.
You may try this (To hide the list items after selection)
$("#my_ul li").click(function() {
$('#Container form input').val($.trim($(this).text()));
$('#my_ul').children().addClass('ui-screen-hidden');
});
DEMO.
Hacky solution is to deal with hiding and showing the ul yourself.
Fiddle: http://fiddle.jshell.net/Qyvhc/8/
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
$("#my_ul").hide();
});
$('#Container form input').on('focus', function () {
$("#my_ul").show();
});
I doubt it's the best solution but I can't see anything in the API docs that would achieve this.
I'm pretty new into JQuery but hope this is what you wanted.
Demo
I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?
It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);
The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/
Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.