I have a html code like this:
<div class="pagination">
<ul>
<li class="prev"><span>←</span></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="next">→</li>
</ul>
</div><!-- .pagination -->
When I add click event for li tag, I want to click li tag don't have span children element.It means that if I click on it, do nothing but other I can click and do something. How can I do it?
You can combine the :not() and :has() pseudo selectors to do that :
$('.pagination ul li:not(:has(span))').on('click', function() {
// do stuff
});
FIDDLE
It does seem easier to just do :
$('.pagination ul li a').on('click', function(e) {
e.preventDefault();
// do stuff
});
Related
I've built a simple toggle menu that when clicked once shows a list of child elements and if clicked again hides those visible elements.
If a child element is clicked however I want it to visit that page only I cant seem to get it working? Is it to do with my prevent Default?
// Language select in global nav
$('.sub-lang').on('click', function(e) {
if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
$(this).children('ul').hide();
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65);
$(this).children('ul').show();
}
e.preventDefault();
});
Here is the JsFiddle
Why don't you simple transform your main menu element in paragraph tag ?
or you could put an # inside your main menu element, and delete prevent default.
In this way you don't need to prevent default on your main elements.
Although google.com doesn't load inside an iFrame, you could check this fiddle. It works.
Look at this (with # in the anchors) fiddle
HTML
<ul style=" ">
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
<li class="sub-lang">
Espanol
<ul style="">
<li>Español</li>
<li>España</li>
</ul>
</li>
<li class="sub-lang">
Francais
<ul style="">
<li>Français</li>
<li>France</li>
</ul>
</li>
</ul>
Add this line before your code
$('.sub-lang > a').removeAttr('href');
Remove
e.preventDefault();
this should work fine
You should add one condition for that.
if($(e.target).parent().hasClass('sub-lang') )
It will allow you to click on submenu.
// Language select in global nav
$('.sub-lang').on('click', function(e) {
if($(e.target).parent().hasClass('sub-lang') ){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
$(this).children('ul').hide();
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65);
$(this).children('ul').show();
}
e.preventDefault();
}
});
ul li ul {
display: none;
z-index: 2;
right: 0;
background-color: #fff;
width: 250px;
}
ul li.active ul {
display: block;
text-align:left;
background: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style=" ">
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
<li class="sub-lang">
Español
<ul style="">
<li>España</li>
</ul>
</li>
<li class="sub-lang">
Français
<ul style="">
<li>France</li>
</ul>
</li>
</ul>
Working Fiddle
Hope it helps.
Here Check This Out.
Explaination.
Instead of delegating the event on the whole li, I bound the event to all the immediate <a> children of the li, and then prevent the propagation for that specific element. So we don't have to figure out how to stop the event propagation (click in our case) to the children element.
Also the JSFiddle may have loading external iframe problems, so check the solution out here.
I think you have to add stopPropagation in your inside list items.
$('.sub-lang ul li').on('click', function(e) {
e.stopPropagation();
});
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 a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}
If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo
If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/
i have this HTML code
<ul>
<li>test1
<div class="sub-menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>test2</li>
<li>test3</li>
<li>test4
<div class="sub-menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</li>
</ul>
that div.sub-menu has hidden in css.
i want when hover in a find div that inside in parent li and show it,
i try in jquery but when hover in a tag show two sub-menu div,
i want when hover in test1 show div.sub-menu that have 1,2,3,4
and when hover in test4 show div.sub-menu that have a,b,c,d
You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:
$(document)
.on("mouseenter", "ul > li > a", function() {
$(this).siblings(".sub-menu").show();
})
.on("mouseleave", "ul > li", function() {
$(this).children("a").next(".sub-menu").hide();
});
This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.
However depending on the desired result you might also be able to do this with pure CSS, e.g.
ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }
See it in action.
Both versions are structured so that they work also for nested sub-menus.
Simply hide/show the sub-menu on mouseover/mouseout:
Javascript
$("li").mouseover(function(){
$("ul", this).show();
});
$("li").mouseout(function(){
$("ul", this).hide();
});
JS Fiddle: http://jsfiddle.net/EDufY/
If You want to display menu on hover effect of li then i think u don't need javascript.
if u change css then it is posiible.
write your css like.
.sub-menu
{
display:none;
}
li:hover .sub-menu
{
display:block
}
And you have multilevel menu then give them id and repate above procedure
Try this with slide effect, http://jsfiddle.net/SmtQf/1/
$(function () {
$('ul li').hover(
function () {
$('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub-menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});
I have a list inside a li which needs to slide into view when the parent li is clicked.
My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
<ul id="offering">
<li class="t current"><span>sage solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="m"><span>solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="b"><span>third party additions</span></li>
</ul>
$(this).find("ul").animate({height: "toggle"}, 1000);
Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.
Instead of the following
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
Try this
$("#offering li").click(function() {
this.childNodes[0].animate({height:"toggle"},1000);
});
I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.