I'm trying to figure out how I can do this -- I need to keep one container open through a click of a sibling list item, but then close it on the second click. The issue is going back to another link and having a handler left on it.
The concept would be to have:
<ul id="nav">
<li>Nav Item Two</li>
<li>Nav Item Three</li>
<li>Nav Item Four</li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
</div>
Using this, I'm interchanging the content with ajax, so a click returns it into my "nav-content" div. When I click on one item, I want the content div to open, and then remain open when the next nav item link is clicked, but closed when it's clicked a second time.
Tried using unbind but I don't think that's appropriate, and it didn't work. Any ideas?
You can do this by:
giving the li a class when you click it
removing that class from all other lis
then checking for that class before you hide or show your div
Essentially using a class to keep up with which li was clicked last
$('#nav li').click(function(){
// remove the `active` cass form all `li`s in `#nav`
// except the one that was clicked
$('#nav li').not(this).each(function(){
$(this).removeClass('active');
});
// check if clicked element has `active` class
// if so it was just clicked for second time, close the div
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$('#nav-content').hide();
}
else{
// if not it was clicked for the first time
// show the div and make the clicked element `active`
$(this).addClass('active');
$('#nav-content').show();
}
});
#nav-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Nav Item Two</li>
<li>Nav Item Three</li>
<li>Nav Item Four</li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
Here is some content
</div>
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.
can you help me with an ideea how i could remove items from a list after i click an item? let's say i have a list with 5 items and i press on the 3rd item, i want item4 and item5 to be removed. I want to remove all items after the one clicked in the list.Here is an html
<div class="row bcrumb">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item">Item5</li>
</ol>
</div>
</div>
Remove all list items after the clicked item:
$('.item').on('click', function(e) {
e.preventDefault();
$(this).nextAll().remove();
});
Codepen
You can use nth:child selector to remove any item from a list like this:
$('ul li:nth-child(4)').remove();
$('ul li:nth-child(5)').remove();
However the question is a bit vague as to whether you want only those items to be removed on clicking 3rd item all the time or it should be a generic rule for other li items as well.
Because of this I cannot suggest which click event you should hook into. However I show you how to hook into 3rd li click:
$('ul li:nth-child(3)').click(function) {
console.log("3rd item clicked");
});
I have a problem figuring out how to make my menu items dynamically change other list items when clicked on.
For example I want Box1:
<nav class="left">
<ul>
<li>
<br>box1
</li>
...
to update the li's in the 'topnav' class:
<header class="topnav">
<ul>
<li>Item</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</header>
so when a user clicks box1 menu item on the left class navigation menu, the for instance - 'Item'/'Item2'/'Item3' list item updates to lets say "NewItemName"/"NewItemName2"/"NewItemName3"
example codepen:
http://codepen.io/anon/pen/Epiom
edit:
I am trying to change the li's of (item,item2,item3) with new ones when you click the side bars navigation buttons. ex, when you click settings the 3 top buttons(top nav li's) would change to profile settings, video settings, sound settings (these names are made up and not in the code)
Check this fiddle whose code is also below and tell me if it is what you want
<body>
<header class="topnav">
<ul>
<li>Item
</li>
<li>Item2
</li>
<li>Item3
</li>
</ul>
</header>
<nav class="left">
<ul>
<li>box</li>
<li>otherbox</li>
</ul>
</nav>
<script>
$(function()
{
$(".left li").click(function()
{
var box = $(this).html();
$( ".topnav li a" ).each(function( index )
{
$(this).html("New" + box + "_" + index)
});
});
});
</script>
</body>
EDIT:
http://codepen.io/zen_coder/pen/beCKf
This code uses Jquery
Click on the right boxes and item menu will change
I had to remove the links href="" because unless the href starts with '#' and points inside the current page clicking the link makes you leave the page!
If you are just starting front end development you may want to have a look at:
http://www.w3schools.com/
http://jquery.com/
http://jqueryui.com/
http://getbootstrap.com/
I know onlu basic jQuery. I want to add active class on parent li by jQuery.
Live site- http://www.arif-khan.net/other/active/page1.html
Go to there then go to page2 under Support menu(http://www.arif-khan.net/other/active/page2.html). You can see code add active class on all li also with parent li(Support).
I need to modify that code so parent li(Support) will get active class instead of parent+all child li.
Code-
<ol id="menu">
<li>Home
<li>OverView
<!-- sub menu -->
<ol>
<li>Technical Info</li>
<li>End Device Info</li>
</ol>
</li><!-- end sub menu -->
<li>Register To Service</li>
<li>Rates</li>
<li>Support
<!-- sub menu -->
<ol>
<li>Page2</li>
<li>Terms Of Service</li>
<li>Contact Us</li>
</ol>
</li><!-- end sub menu -->
<li>Skype</li>
</ol>
jQuery-
<script>
$(document).ready(function(){
$('ol#menu li a').each(function(index, element) {
var li = $(element).attr('href');
$(element).parent().removeClass("active");
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
if(filename==li)
{
$(element).parents("li").addClass("active");
}
});
});
</script>
You must use
$(element).parent('li').parents('li').addClass("active");
instead of
$(element).parents("li").addClass("active");
Your anchor 'page2' is inside an 'li', so this is its direct parent. You must access the 'li's parent.
The parents() method selects all matching parent elements up the DOM tree. , You can use parent() For selecting the immediate parent element and closest() for selecting the first matching parent up the DOM tree.
So try
$(element).closest("ol").parent("li").addClass("active");
Instead of
$(element).parents("li").addClass("active");
I am trying to change the css class of the parent list item when a child list is hovered. For example, I have:
<ul class="ipro_menu">
<li class="menu-first">
First
<ul class="sub-menu">
<li>Other A</li>
<li>Other B</li>
</ul>
</li>
<li class="menu-second">Second</li>
</ul>
So, what I'm trying to accomplish is when a .sub-menu li element is hovered, change the class of the parent li it resides in. In this example, if li containing "Other A" or "Other B" is hovered, change the class of the li.menu-first.
I've tried:
$('.sub-menu li').hover(function(){
//$(this).closest('.ipro_menu li').addClass('color_a');
//$(this).parent().addClass('color_a');
//$(this).parents('li').prev().addClass('color_a');
// None of the above 3 worked...
});
I think you just want:
$(this).parents("li").addClass("color_a")
That should work. I don't know why you added .prev() in your attempt.