I'm a beginner to javascript, I've been trying to add the active class to a li using jquery i.e. When its clicked, expand li and make it active:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
This only makes the sub-menu active but not expanded. But when I manually added the active class (as shown below) to treeview and li, it expanded and became active. How to dynamically add the active class through jquery?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-plus"></i> Add</li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> View </li>
<li><i class="fa fa-circle-o"></i> Settings </li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
So, you need to apply active class on all .treeview using parents:
$(this).parents('.treeview').addClass('active');
Actually, changing parent() to parents() fixed it:
$(this).parents().addClass('active');
Related
I have li list items. When I click on any one li item it should get appended or displayed to one div tag and the remaining list items at the sam time should get appended in other div tag using jQuery.
$(document).on('click', '.main-menu li', function() {
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$(this).remove()
});
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Hope I understood correctly what you expected. As mentionned before, if you want to append li to your div, you need a parent ul on top.
As suggested, here is a snippet :
$('.main-menu li').on('click', function(_click) {
var $selectedLi = $(_click.currentTarget);
$('.topnav ul').append($selectedLi.clone());
$selectedLi.remove();
$('.sidenav ul').append($('.main-menu ul').clone());
$('.main-menu ul').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
<ul></ul>
</div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav">
<ul></ul>
</div>
Actually you can't append li elements to div, they can just be appended to a list element.
What you need to do is to get the text of the li elements and append it to the divs, and use $('.main-menu li').not($(this)) to get other li elements, where $(this) is the clicked li element.
This is how should be your code:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
Demo:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
I have a main menu (collapse) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1
What I am looking for :
When the menu is closed, a "plus" icon is displayed.
When the menu is open, a "minus" icon is displayed.
The "plus" icon is displayed on the menu but does not change.
I think there is a problem with my JS code.
<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
<ul class="menu nav navbar-nav">
<li class="expanded dropdown open">
<i class="fas fa-plus-circle fa-lg"></i> Boutiques
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-shopping-bag fa-lg"></i> Boutiques
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Produits
</li>
<li>
<i class="fas fa-sign-language fa-lg"></i> Services
</li>
</ul>
</li>
<li class="expanded dropdown">
<i class="fas fa-plus-circle fa-lg"></i> Groupes
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-users fa-lg"></i> Groupes
</li>
<li>
<i class="fas fa-newspaper fa-lg"></i> Annonces
</li>
<li>
<i class="fas fa-file-alt fa-lg"></i> Articles
</li>
</ul>
</li>
<li>
<i class="fas fa-id-card fa-lg"></i> Profils
</li>
</ul>
</nav>
Here is my JS code. Something is wrong with it.
(function ($) {
$(".collapse-change-icon").on('shown.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".collapse-change-icon").on('hide.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
})(window.jQuery);
You have not used the right bootstrap events for dropdown. Try this one.
jQuery(document).ready(function ($) {
$(".dropdown").on('shown.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".dropdown").on('hidden.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
});
REf: https://getbootstrap.com/docs/3.3/javascript/#dropdowns-events
I am using a jQuery menu plugin from http://mmenu.frebsite.nl/
Everything is working fine, but when I select the sub menu, it never shows the active state. It keeps on sending to the main page after page loads. See the screenshot for more information.
I am doing this:
<div id="menu">
<ul class="listview-icons">
<li>
<a>
<form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
<div class="form-group texttransform">
<input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
<span id="shipment_alert" class="alert" style="color:#CF0"></span>
<BR />
<input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
</div>
</form>
</a>
</li>
<li><i class="fa fa-home"></i> HOME</li>
<li>
<span><i class="fa fa-file-text-o"></i> SEND</span>
<ul>
<li><i class="fa fa-file-text-o"></i> DOCUMENTS</li>
</ul>
</li>
<li>
<span><i class="fa fa-plane"></i> SERVICES</span>
<ul>
<li><i class="fa fa-map-marker"></i> SAME DAY DELIVERY</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i> ABOUT US</span>
<ul>
<li><i class="fa fa-info-circle"></i> ABOUT US</li>
<li><i class="fa fa-info-circle"></i> FAQ</li>
<li><i class="fa fa-info-circle"></i> HOW IT WORKS</li>
<li><i class="fa fa-info-circle"></i> PACKAGING ADVICE</li>
<li><i class="fa fa-info-circle"></i> REVIEWS</li>
<li><i class="fa fa-info-circle"></i> TERMS</li>
<li><i class="fa fa-info-circle"></i> POLICIES</li>
<li><i class="fa fa-info-circle"></i> VOLUME CALCULATOR</li>
</ul>
</li>
<li><i class="fa fa-phone"></i> CONTACT US</li>
<li><i class="fa fa-fw fa-shopping-cart"></i>ITEMS</font></li>
<li><i class="fa fa-fw fa-user"></i> my account</li>
</ul>
</div>
How to fix this? The working demo is at www.matchcouriers.com
I have solved it, using smarty condition as i am using smarty as a template and the class that need to be used from mmenu is mm-seleced
<li class="mm-selected"><i class="fa fa-home"></i> HOME</li>
By default mmenu uses the css class Selected (note the capital S) on the current li for the current selected item.
selected menu have a dark background
You must define your own li.Selected style, I don't think you have done this.
sub-menu panel should stay as it is, but after selecting menu and page load, main-menu appear no the selected sub-menu panel
This is actually not automatic. You need to add Selected class to the relevant li on your pages. For example, in the About Us page, you would do this:
<li class="Selected"><i class="fa fa-info-circle"></i> ABOUT US</li>
References:
Styling Lists
Menu Items not selected after page load
My code for a 2 level menu goes like this:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
</a>
</li>
</ul>
</li>
<ul>
Now I want to select the span with id=destruct, which is at level 1 and on click remove entire html in the li (including the second level ul tag). You must have got it that I am trying to make a "X", upon clicking which the menu item and any sub-menu item deletes.
However, I need your help in selecting the correct elements. For only Level 1 menu, the following jQuery code works:
$(".destruct").click(function(e){
$(this).parent().remove();
});
What could be the correct selector for Level 2 menu? I tried a few options like nth children and all, but cant seem to get it right.
You have this: li > a > span, so if you start in the span, you should look at the parent of the parent, of what is best, search for the closest "li" (because yo can change your html structure inside li's without tuch your jquery code). With a change in the html (add the x in all levels) you can get what #Juan suggested:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
<span class="destruct" style="float:right">X</span>
</a>
</li>
</ul>
</li>
<ul>
$(function () {
$(".destruct").click(function() {
$(this).parent().parent().remove();//first option
$(this).closest('li').remove();//best option
});
});
Working example: http://codepen.io/anon/pen/ZGaGby
I'm facing a little problem with jQuery. My navbar have links that became blue when they are selected ('active' attribute), I can add attributes until now, but when I click on another link I can't remove the last one correctly. I wrote some code, I'll be thankful if anyone could help me.
//jQuery
jQuery('.navbar-nav').on('click', ' li > a.ajaxify', function (e) {
e.preventDefault();
App.scrollTop();
var url = $(this).attr("href");
var menuContainer = jQuery('.navbar-nav');
var pageContent = $('.page-content');
var pageContentBody = $('.page-content .page-content-body');
menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');
menuContainer.children('arrow.open').removeClass('open');
$(this).parents('li').each(function () {
$(this).addClass('active');
$(this).children('a > span.arrow').addClass('open');
});
$(this).parents('li').addClass('active');
App.blockUI(pageContent, false);
...
});
//HTML
<li class="active">
<a href="" class="ajaxify" id="startLoadTag">
<i class="fa fa-home"></i> Link
</a>
</li>
<li class="">
<a href="" class="ajaxify">
<i class="fa fa-puzzle-piece"></i> Link
</a>
</li>
<li class="">
<a data-toggle="dropdown" data-hover="dropdown" data-close-others="true" class="dropdown-toggle" href="">
<i class="fa fa-quote-right"></i>
Evento
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-building"></i> Link
</li>
<li>
<i class="fa fa-lightbulb-o"></i> Link
</li>
<li>
<i class="fa fa-suitcase"></i> Link
</li>
<li>
<i class="fa fa-group"></i> Link
</li>
<li>
<i class="fa fa-comments"></i> Link
</li>
</ul>
</li>
Before this line
$(this).parents('li').addClass('active');
you need to run an .each function for every 'active' class and remove the class.
Maybe something like this
$('li').each(function() {
if($(this).hasClass('active') {
$(this).removeClass('active');
});
}
Problem solved, just did it and everything worked just fine. Thanks all.
menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');
$('ul').each(function() {
$(this).children('li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
});
$(this).parents('li').addClass('active');