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).
Related
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');
}
I would like to open a link for example "1" (1.html) and afterwards it should show (toggle) all child elements of the site 1 (1-1, 1-2,...). I did a research in google and of course also in stackoverflow.
I only found a similar issue of someone who uses wordpress, which it comes nearly to my wish, but I am not a expert like you guys: http://premium.wpmudev.org/forums/topic/jquery-toggle-and-allow-default
<div class="col col-md-3">
<nav id="#mobile-nav" class="nav clearfix" role="navigation">
<ul class="nav" id="menu-flag-menu">
<li>Startseite</li>
<li>1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li>2
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
</ul>
</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</nav>
My jQuery toggle function:
$("#menu-flag-menu li a").click(function(){
// close all opened sub menus
$("#menu-flag-menu > li > ul > li > ul > li > ul").slideUp();
// http://stackoverflow.com/questions/2534162/simple-jquery-toggle-of-children
var ul = $(this).next("ul");
if (ul.is(":hidden")) {
ul.slideDown();
}
else {
ul.slideUp();
} });
My CSS:
ul#menu-flag-menu > li > ul { display:none; }
I hope you can help me, thanks! This is my first question, I don't double post and I try to used my brain, google and stackoverflow, before I ask. :)
I guess the JSfiddle would not help for imagine my demand, but here it is:
http://jsfiddle.net/tFh9w/1/
http://jsfiddle.net/tFh9w/8/
Because you are using static HTML files, unless you want to make the menu different in each file (I hope you're at least including the menu using SSI), you need JS to detect what page the browser has opened, and to then trigger the opening of the relevant menu item.
First of all let's make it easy and add a level1 class to the level 1 menu elements.
<li class="level1">1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li class="level1">2
etc etc
Then we find the last part of the URL, and use jquery to find the anchor who's href matches it. Then we check if it's a parent or child (only works for two levels, but can be adapted for more) and we open the correct menu item.
$(function(){
var hrefs = $.trim(window.location.href).replace(/\/$/, "").split('/');
var href = hrefs[hrefs.length -1];
href = '1.html'; // we have to cheat in jsfiddle. remove this line in production
// href = '1-1.html';
$('#menu-flag-menu a[href="' + href + '"]').each(function(){
// what are we opening - the child of this link or the parent?
if ($(this).parent().hasClass('level1')) $ul = $(this).parent().children('ul');
else $ul = $(this).closest('ul');
$ul.slideDown();
});
});
In the example I've had to cheat because in jsfiddle the href is always going to be _display
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 am quite new to html, css, and javascript and I was wondering if there is a way to make a <li> element not clickable. Basically I want to have one active element and the have the other elements disabled and not clickable.
Right now when I click on some other <li> the active moves to that element and I can't figure out how to leave it on the first element.
You will need to post code of the dropdown as it is impossible to help you further without knowing how the <li> tags are being triggered.
Here is a jQuery example that shows a very simple list item menu.
jsFiddle Demo
I added two ways to stop the <li> elements from being clickable: simple boolean switch, and using jQuery's .off() method.
HTML:
Some List Items:<br>
<ul>
<li>First Item</li>
<li class="active">Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<input id="mybutt" type="button" value="Disallow First Click" />
jQuery/javascript:
var ok2change=1;
$('body').on('click', 'li', function() {
if (ok2change==1){
$('li').removeClass('active');
$(this).addClass('active');
ok2change=0;
}
});
$('#mybutt').click(function() {
$('body').off('click', 'li');
$(this).val('First click disallowed also');
});
Add some css class to the "active" li element and change the selector of the attached handler, so that it attaches only to it:
$("li.someCssClass").click(function() {
// ...
});
here only li elenements having "someCssClass" will react on the click, others will not.
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