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.
Related
I have a setup like this
<ul>
<li> link
<ul>
<li> link
<ul> ... etc
</ul>
</li>
</ul>
So several nested uls, I need to figure out some way to find what level of nesting the ul has based on link that was clicked inside it, is it a top (1st) middle (2nd) etc.. one
If you have clicked element <li> (in your event handler) you can just count all parent <ul> elements
element.parents('ul').length
You can use
$("a").click(function(){
alert($(this).parents("ul").length);
});
Fiddle
I have the following HTML:
<div class="filter_dropdown_con">
<a class="trigger" href="0">all items</a>
<div class="dropcontainer">
<ul class="dropdownhidden">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
In my JS I use the following code on the level of the li element:
// get href of <a> tag of a clicked li tag
liahref=this.getElementsByTagName('a')[0].href;
// remove domain path, ie. remove everything until the slash
liahref=liahref.substring(liahref.lastIndexOf("/") + 1);
// put it into the href of the trigger a tag
trigger.href = liahref;
My question: In the last line ob the above JS, how can I address ONLY the trigger element of the div structure which contains the clicked li element? Because when I write "trigger.href", then ALL trigger-elements also in other div structures on the same page with similar drop down menus that include the "trigger" class get the value.
** EDITED: **
Background: The JS excerpt above is part of a major JS script to turn a select menu into a drop down menu with li elements. Here is the complete script:
http://jsfiddle.net/9dy7D/
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 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'm trying to find an element in div called wrapper which has a class of active but is not the one I've just clicked.
Here is my code which works if I click on the .title class:
$(".title").click(function(){
if ($("#wrapper ul li").hasClass("active")) {
alert("found one!");
}
});
But i have no idea how to check if its not the one I've clicked. I tried adding .not(this) and .not($(this)) to my if statement to no avail.
I should add i plan to removeClass of any that are not the current selected div.
I'm sure I have something wrong somewhere.
for reference heres the HTML:
<div id="wrapper">
<ul>
<div class="title">Title</div>
<li class="active">Active Clicked List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
</div>
Any Suggestions on how I can do this?
Please note that your html is invalid, DIV can not be a child of UL. Selector is not correct either using $('.title') since it is not the class that you are applying active to
hasClass() returns a boolean, so is not chainable
Not exactly sure what you are trying to do but based on code shown you need to use the not() filter before hasClass():
if ($("#wrapper ul li").not(this).hasClass("active")) {
OR
if ($("#wrapper ul li.active").not(this).length) {
If all it is for is to remove the class, simply remove the active class from all before adding to the current one and you don't need to test for it first
Using not works fine to exclude an element:
$('#wrapper li').click(function(){
$('#wrapper li').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/97DXe/
If you comment out the addClass, you will see that clicking the already active element doesn't remove the class from it.
If you are going to set the active class on the clicked element, it doesn't do much harm to simply remove the class from all the elements first, so then you wouldn't need the not.