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");
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'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>
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 am trying to add "active" class by jQuery because that code from a aspx master file. I know PHP but no ASAP.
When anyone go to submenu page like Technical-Info.aspx, End-Device-Info.aspx page then need addClass on parent li(<li class="active">OverView instead of <li>OverView).
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>FAQ</li>
<li>Terms Of Service</li>
<li>Contact Us</li>
</ol>
</li><!-- end sub menu -->
<li><img src="img/callme_small4.png" width="85px" height="85px"; /></li>
</ol>
You can use following:
$("li[title=FAQ]").addClass("active");
One alternative is to to these changes in the server side. To do so, you would have to transform each HTML element into a server-side control. To do so, simply put a tag runat="server" in each of them, and put an ID to identify them. For instance:
<li>OverView</li>
becomes:
<li id="overviewMenu" runat="server">OverView</li>.
Then on the server side, use to follow pseudo algorithm:
Retrieve all menus and mark them as not 'active".
Select the menu to be marked and set it as 'active'.
Here are a few methods of ASP.NET which will be useful:
In order to get your HTML controller server-side by id, use the following method: HtmlControl control = (HtmlControl) this.FindControl("controllerId");, where the controllerId is your server side id. You can use the HtmlControl generic type to cast all your HTML controls. You will need the package System.Web.UI.HtmlControls for the HtmlControl.
To add the active class use the following command: control.Attributes.Add("class", "active");. To remove, use this one: control.Attributes.Remove("class");;
I have a navigation that's a unordered list, here's the simple structure I'm following / have to follow for my jQuery plugin to work correctly, therefore making this code structure a necessity:
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<ul id="demo1" class="nav">
<li>
Devices
<div class="mp-level">
<h2>Devices</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Mobile Phones</li>
<li>Televisions</li>
<li>Cameras</li>
</ul>
</div>
</li>
<li>
Magazines
<div class="mp-level">
<h2>Magazines</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>National Geographic</li>
<li>Scientific American</li>
</ul>
</div>
</li>
...
</ul>
</div>
</nav>
I need to provide a fallback and I have selected another jQuery plugin that needs to use a different structure to the above. I need to remove the DIV's with classname .mp-level but still keeping all unordered lists including .mp-level child lists.
The result will just be unordered lists without headings and DIV'S. My code below is removing the correct elements but my issue is with re-inserting the child unordered lists (specifically level 2):
$( "#demo1 h2, .mp-back" ).remove();
$( ".mp-level ul li .mp-level" ).detach();
$( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');
Anyone got any advice how to re-insert child UL's after I have removed their parents?
you can do this
$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level"
$(n).parent().append($(n).children());//append children to parent
$(n).remove();//remove actual div
});
http://jsfiddle.net/WBWwG/
You can save the detached nodes (wrapped inside a jQuery object) by assigning them to a variable and then using that variable in the .append() call.
Something like this:
// this selector doesn't select anything from the example html, btw
var $mp_level = $( ".mp-level ul li .mp-level" ).detach();
$(".mp-level ul li").append($mp_level);