I have a (semantically incorrect) HTML like this:
<ul>
<li class="year">2009</li>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
<ul>
<li class="year">2008</li>
<li>Project 4</li>
<li>Project 5</li>
<li>Project 6</li>
</ul>
<ul>
<li class="year">2007</li>
<li>Project 7</li>
<li>Project 8</li>
<li>Project 9</li>
</ul>
and a jQuery script like this:
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year)').toggle('fast');
})
})
It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked year.
Hope this makes sense.
Any help appreciated.
May be you should use the :hidden or :visible selector to distinguish which are already shown.
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
})
})
In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?
Related
I am fairly new to java script.
I would like to know how to make a drop down menu in which it will have links as element, but it will change according to what the user inputs.
I am working on a calendar, in which each day there is a different event, and a different link to sign up for that event. My goal is to create a drop down menu that will give the links to sign up for the several events happening on that day. So it will change its content according to which day the user selects. So far, I only see how to create drop down menus with already set links, but I want to have the drop down menu to be able to change the links in the elements, according to what the user chooses.
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul></li>
<li>Menu 4</li>
</ul>
Here's a simple example of how to change links in javascript:
<ul>
<li>Menu 1</li>
</ul>
<script>
document.getElementById("link1").setAttribute("href", "https://www.google.com/");
document.getElementById("link1").innerText = "My New Link"
</script>
Hi I am trying to make a horizontal menu bar using CSS and Javascript.
When clicked, I want the menu item to background to turn black.
Here is a part of HTML code-
<ul id="top_menu">
<li onclick="arrow(this)">item no 1</li>
<li onclick="arrow(this)">item no 2</li>
<li onclick="arrow(this)">item no 3</li>
<li onclick="arrow(this)">item no 4</li>
<li onclick="arrow(this)">item no 5</li>
</ul>
JavaScript part-
function arrow(x){
x.style.background="#000000";
}
Now when someone clicks on the menu, the background turns black.The problem is when any other item is selected(clicked) the previous selected item doesn't goes back to its original background color.
How should I implement this feature?
Thanks!
There are few ways... This one is easiest to me:
function arrow(x){
var ul = document.getElementById('top_menu');
list=ul.getElementsByTagName("li");
for(i=0;i<list.length;i++){
if(list[i]!==x){
list[i].style.background="#ffffff";
}
else {
list[i].style.background="#000000";
}
}
}
Demo: http://jsfiddle.net/ag9L09sb/1/
I have a nav element which is something like this:
<ul>
<li name='first_item'>
<ul>
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
and the code that handles the the sliding down and up is:(nav is a html element which is a parent of above)
nav.find("li").each(
if ($(this).find("ul").length > 0) {
_callback = false;
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
what happens is when I hover over the first_item it opens the sub menus and after it's finished sliding down them, it will open item 1's sub menus as well. I'm totally lost over this. Any help would be appreciated.
First of all, it seems you copyied the jquery without the function, so that isnt the problem:
nav.find("li").each(function(){
I think the problem is, that you travel to deep, so try this:
$(this).find(">ul")
or this:
$(this).children("ul")
From jQuery:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
I have a drop-down menu made up of unordered lists containing several options. Upon selection of an option, I want this option to populate the head selection box (li class="first") replacing the "I am a..." text. Then the "Go" button can be pressed to open the href for that specific option. Here is the html:
<div class="dropNavOne" class="gradient">
<ul>
<li class="first">I am a...
<ul class="menu_body1">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li class="last">Option 10</li>
</ul>
</li>
</ul>
</div>
<div class="goButtonOne" class="gradient">Go</div>
If this is at all possible please let me know...thanks!
Here's a few pointers that you'll find useful in writing this. There may be plugins that directly fit your requirements, but on the other hand it sounds simple enough that you could do this yourself.
Use classes for hidden and revealed elements in your unordered list
Set up a DOM ready handler to add event handlers to your page
Attach a click event to show your menu (probably by class, so you can show many items in one go)
Attach a click event to hide your menu
Use an html injection method to modify the inner HTML of an element
You can certainly use jQuery for this. It's lovely to work with, and writing something like this would be a good first exercise.
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems