I'm completely STUCK with this very simple task, I would be glad for any advice.
I've created a dropdown menu for user selection using <ul> and <li>. Once the user clicks on a certain menu Item (from the class submen), this item gets the class active assigned to it.
<ul id="firstid">
<li id="secondid">Title1
<ul class = "submen">
<li class = "active">Option1</li>
<li>Option2</li>
</ul>
</li>
</ul>
Now I want to retrieve the text "Option1" since the user has selected this item in the above example and its class is active. How do I go about this using jQuery? This doesn't seem to work:
var selected_option = $("#secondid" ".submen" ".active" "a").text();
Chained selector looks like this:
var selected_option = $("#secondid .submen .active a").text();
Related
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.
This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.
You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps
You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.
I'm trying to get a different image to show up when the page that is clicked on or that "active" can be dynamic, using javascript/jQuery. I would like to put a unique ID for each li and use javascript.
I'm very new to javascript and don't really know where to start. Any help would be great. Thanks.
<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class="active nav-edit " id="nav-main-menu">
<li class=" nav-link active ">
ABOUT
</li>
<li>
FOR TEACHERS
</li>
<li>FOR STUDENTS
</li>
<li>FOR PARENTS
</li>
<li>CONTACT US </li>
<li>REGISTER </li>
</ul>
jQuery: You can use .each and the incrementing index in the callback function:
$("#nav-main-menu li").each(function(index) {
$(this).attr("id", "id" + index);
});
Each li will now have an ID starting at id0 to however long the list is.
You could try this if you don't want a numeric ID:
$('li').each(function(){
$(this).attr('id',$(this).text().trim().toLowerCase().replace(' ','_'));
})
Asuming each li element has a link with a different text description, this will assign each li element with an id equal to the text value in lowercases and with spaces replaced by underscores.
JSBin Demo
Greetings
I have this structure:
<ul id="list" class="tabs">
<li class="list">Dados do Responsável</font></li>
<li class="list">Morada e Contactos</li>
<li class="list">Opções de Adesão</li>
</ul>
and I am using jquery and css to make it look like a tab menu.
the css and I can define the currently selected menu by setting the class "active" in the li I clicked.
the question is I am trying to find the currently selected li without clicking on it...
I know it can be done using the $("#list").find(), but I don't know how! all I know is that the selected li contains the css class "active"
Can someone help me out with this one?
Just use the class selector:
$('#list').find('.active');