The else condition of my if/else is not firing. The condition is for the li.catparent, so that if it is clicked, I can have certain code fired. If one of the other items without 'li.catparent' is clicked, then different code will be fired. Perhaps someone could tell me what I'm missing? My if/else statement is very simple, and I'm not sure why it isn't firing. I definitely missing something.
HTML:
<ul class="portal-filter categorylist" id="filter">
<li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
<li class="category">Category 1</li>
<li class="category">Category 2</li>
<li class="catparent">
<span class="catparenttxt">
Category Parent
<span class="subnavarrow"></span>
</span>
<ul class="subcatlist">
<li class="category">Subcategory 1</li>
<li class="category">Subcategory 2</li>
<li class="category">Subcategory 3</li>
</ul>
</li>
<li class="category">Category 1 and 2</li>
</ul>
jQuery
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else{
console.log('category without parent clicked');
}
});
or
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else if(!$(this).hasClass('catparent')){
console.log('category without parent clicked');
}
});
Here's a Fiddle that seems to be working with the simple code.
Here's a fiddle with my entire project code included that shows it isn't working.
This issue appears to be related to the media boxes plugin that you have used. If you take the $('#grid').mediaBoxes({ ... }); part out of the broken JSFiddle you have provided, it works perfectly as expected. You can see this fix in the updated JSFiddle here.
To work around this issue, you need to handle the clicks on the a tags inside the list items as well:
$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
....
});
The reason is that the click-event is actually only triggered for the li.catparent; this is due to the anchor-elements inside the other lis, that consume the mouse click.
You can add a handler to those, too, to receive the event:
$('ul.categorylist li a').on('click', function(e) {
alert('a inside li clicked');
}
Related
Hi i am trying to remove an item that is hyperlinked with Jquery and it doesn't seem to be working out that good, can someone shed a little light? Thanks.
HTML Code:
<ul id="displayAgency">
<li>Item One
</li>
<li>Item Two
</li>
<li>Item Three
</li>
<li>Item Four
</li>
</ul>
Jquery:
$('#displayAgency').click('click', function () {
$("li itemDelete").remove();
return false;
});
You are missing the class selector :
$("li .itemDelete").remove(); //Which is a dot
You might wanna note that this will delete all li no matter which one you click and go back to the top of the page.
Are you looking for this instead?
$('#displayAgency .itemDelete').on('click', function (e) {
$(this).remove(); //This remove the 'a' but keep the 'li'
//$(this).parent().remove(); would remove the 'li'
//return false; You should use prevent default
e.preventDefault();
});
I want to make a menu with a submenu and I want the list point be just clickable once until the user gets to the next one.
I tried it with return false, but in this case the tags are not clickable anymore.
<div id="navigation">
<ul>
<li>corsets</li>
<li class="active">news
<ul>
<li>blablaba</li>
<li>blubbblubb</li>
</ul>
</li>
<li>person
<ul>
<li>blablaba</li>
<li>blubbblubb</li>
</ul>
</li>
<li>contact</li>
</ul>
</div>
and the javascript:
$("#navigation li").click(function(evt){
if($(this).hasClass("active")) {
return false;
}
$(this).addClass('active');
});
if the user clicks the next menu point, the one before is clickable again of course, I remove the .active in a later function. This is just a snippet...
This may seem silly and simple but you can use:
$('#navigation li').click(function(evt) {
$(this).toggleClass('active');
});
That will add it if it isn't there and remove it if it is. You can also use:
$(this).html($(this).text);
If you want to remove the hyperlink (assuming your formatting isn't based around them, in which case nevermind).
I want to check if the element with the class nav-title also has an active class, if true, slide down the next element (which has a class of .sub-nav) beneath the element with the nav-title class.
Otherwise if no element with the class of nav-title has an active class, find the first element with a class of .sub-nav, show it, go up, add the class of active to the .nav-title
The next code with the on-click functions works just fint, it's just the first one that doesn't.. i've tried to add the class active in the html document itself, but then both the first element and the second gets the class active and no sub nav gets slide down.
$(document).ready(function() {
if ($("#nav").find("nav-title").hasClass("active")) {
$(this).next(".sub-nav").slideDown("fast");
} else {
$("#nav").find(".sub-nav:first").show().prev().addClass("active");
}
$("#nav").on("click", ".nav-title", function() {
$('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
$(this).toggleClass("active");
$(this).next(".sub-nav").stop().slideDown("fast");
});
});
Can anybody help?
Also my html looks like this by the way:
<ul id="nav">
<li class="nav-title">Title 1</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
<li class="nav-title active">Title 2</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</ul>
My code might be a little messy, i'm just learning jquery as we speak.
Wooops! I made a little live example: http://fiddle.jshell.net/kcWA8/2/
You can't use this in this context the way that you think you can. this inside of the if is not the nav. You're also mising the . before nav-title in your find. Do this instead:
if ($("#nav").find(".nav-title").hasClass("active")) {
$("#nav .nav-title.active").next(".sub-nav").slideDown("fast");
}
Or:
var $active = $("#nav .nav-title.active");
if ($active.length > 0) {
$active.next(".sub-nav").slideDown("fast");
}
I used James Montagne's answer, it worked just fine, looks like I misunderstand this (this) and forgot a dot in front of my class.
Thanks!
I am attempting to build a Jquery/CSS drop down menu and things have been going pretty good so far. I'm pretty new to JQuery and I get it most of the time - however, I cannot figure out what I am doing wrong here.
I am attempting to change the class of one of the drop-down tabs when it is clicked, but it doesn't appear to be working as expected.
You can see the code I have so far over here:
http://jsfiddle.net/utdream/NZJXq/
I have the class "selected" looking how I want the button to look when a button is clicked on, but I cannot seem to make it so the "selected" class is applied on a click event. In theory, this:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
Should change this this on a click event:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
And this is my current jQuery (which doesn't work):
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$("a:first").removeClass("hasmore");
$("a:first").addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
I've tried rewriting this code in many,many different ways and I'm running out of ideas on what I could be doing wrong.
Anyone out there have any pointers on what I could do to fix this?
Thank you in advance!!
Do it like this:
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
You were actually changing the class of the first <a> in your page, not the <a> you clicked, which you can access directly in the handler with $(this) .
Did you try use "this" inside the call??
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
It worked for me
I have this markup:
<ul><li id="link-notifications">
<ul class="list-notifications" style="display:none">
<li>Item 1</li>
</ul>
</li>
</ul>
with this Jquery:
$('#link-notifications').click(function(e){
e.preventDefault();
e.stopPropagation();
$(this).find('.list-notifications').slideToggle('medium');
});
but whenever the list slides down, and I click the link, the list just slides back up. I have heard that stopPropagation works so I added it but it does not work. I even tried adding it to the slideToggle callback but it just stops the slideUp action. Any ideas?
Binding click event only to #link-notifications ans escaping its inner contents.
$('#link-notifications, :not("#link-notifications > *")').click(function(e){
e.stopPropagation();
$(this).find('.list-notifications').slideToggle('medium');
});
Working sample
You don't need e.stopPropagation() inside that event but in the click of the link.
Just add
$('.list-notifications').click(function(e){
e.stopPropagation();
});
http://jsfiddle.net/N6pYU/1/
HTML
<ul>
<li id="link-notifications">
link-notifications
<ul class="list-notifications">
<li>Item 1</li>
</ul>
</li>
</ul>
jQuery
$('#link-notifications>a').click(function(event){
$(this).siblings('ul.list-notifications').slideToggle('medium');
});
I attached the event not to a parent of what I wanted to slide but a sibling. This keeps weird events from bubbling.
Fiddle: http://jsfiddle.net/iambriansreed/59e3F/