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/
Related
Trying to create a pseudo dropdown select, What I am trying to do is when a li is clicked, the content of <span></span> is replaced with the content of the clicked li
The problem is that its working only for the first click, not for the subsequent ones. What am I missing here.
Here is the unordered list
<div id="dd" class="language-selection" tabindex="1"><span>Language</span>
<ul class="dropdown">
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
Here is the jQuery code :
jQuery('.language-selection ul li').click(function(){
var languageSelection = jQuery(this).text();
jQuery('.language-selection span').replaceWith(languageSelection);
});
replaceWith replaces the actual element with new contents passed as argument to this method,due to which it works for first time. afterwords no span element exist on first replacement.
Use .text() instead of replaceWith to set text to element.:
jQuery('.language-selection span').text(languageSelection);
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
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'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.
Okey so I got a List that's beeing created depending on the information from a database. the end result looks something like this:
<ul id="menu">
<li onclick="testFunction(1, "text")">Title1</li>
<li onclick="testFunction(2, "text")">Title2
<ul class="sub">
<li onclick="testFunction(3, "text")">Title3</li>
</ul>
</li>
<li onclick="testFunction(4, "text")">Title4</li>
</ul>
Now, I want to send the id and the text to the function "testFunction". This works great with the primaty li elements, but when I click a li element from the "sub" class, the function is first run on the pressed li element and then on the li element above. So in this case, if i press Title3, the function will first be ran with id 3 and then with id 2 witch is the parent element. I am thinking it's somehow accessing the whole li tree somehow but can't really understand why. any thoughts?