Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am currently working on a practice exam making a car rental website. Me and my friend who are working together. Beginning to make an admin page I came to an issue changing the active class on a menu item. tried much, but no succes yet. My question is how can I change the active class on a menu item with Javscript?
The code below is from the nav.php file which is included in the admin page php file
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="#">Rent an Electric</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="admin-page-2.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">
Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Wagenpark">
<a class="nav-link" onclick="return loadQueryResult('wagenpark')" href="page_admin.php?wagenpark">
<i class="fa fa-fw fa-car"></i>
<span class="nav-link-text">
Wagenpark</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Gebruikers">
<a class="nav-link" onclick="return loadQueryResult('gebruikers')" href="page_admin.php?gebruikers">
<i class="fa fa-fw fa-user"></i>
<span class="nav-link-text">
Gebruikers</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Klanten">
<a class="nav-link" onclick="return loadQueryResult('klanten')" href="page_admin.php?klanten">
<i class="fa fa-fw fa-child"></i>
<span class="nav-link-text">
Klanten</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Facturen">
<a class="nav-link" onclick="return loadQueryResult('facturen')" href="page_admin.php?facturen">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">
Facturen</span>
</a>
</li>
<
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>
Uitloggen</a>
</li>
</ul>
</div>
</nav>
<script>
function loadQueryResult(name) {
$('.container-fluid').load('includes/admin-page/pages/'+ name +'.php');
return false;
}
//Hier moet nog een function komen voor het aanpassen van de li class naar active
$('.navbar > ul.nav li a').click(function(e) {
var $this = $(this);
$this.parent().siblings().removeClass('active').end().addClass('active');
e.preventDefault();
});
</script>
You can do it with jquery. Set up a default .active class on one of the elements in the navbar, then you can removeClass and then addClass with jquery.
$(document).ready(function() {
$('.navbar-nav li a').click(function(e) {
$('.navbar-nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
nav ul li.active span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="#">Rent an Electric</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item active" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">
Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Wagenpark">
<a class="nav-link" onclick="return loadQueryResult('wagenpark')" href="#">
<i class="fa fa-fw fa-car"></i>
<span class="nav-link-text">
Wagenpark</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Gebruikers">
<a class="nav-link" onclick="return loadQueryResult('gebruikers')" href="#">
<i class="fa fa-fw fa-user"></i>
<span class="nav-link-text">
Gebruikers</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Klanten">
<a class="nav-link" onclick="return loadQueryResult('klanten')" href="page_admin.php?klanten">
<i class="fa fa-fw fa-child"></i>
<span class="nav-link-text">
Klanten</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Facturen">
<a class="nav-link" onclick="return loadQueryResult('facturen')" href="page_admin.php?facturen">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">
Facturen</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i> Uitloggen
</a>
</li>
</ul>
</div>
</nav>
Try it out in fullscreen.
Simply use the jQuery add and remove class functions.
Adding a class:
var $element = $('.nav-link')[0]; // 0 being the index of the nav-links found
$element.addClass('active');
Removing a class:
var $element = $('.nav-link')[0];
$element.removeClass('active');
You could also do something a little more sassy ;)
function ToggleActive(link)
{
var $element = $('.nav-link[href="'+link+'"]');
$element.addClass('active');
}
ToggleActive('admin-page-2.php');
The ToggleActive() function takes the link as a parameter.
Ik merk op dat er Nederlandse comments staan en zal dus bij deze snel even in het Nederlands verder helpen.
Bij onderstaande regel wordt op hetzelfde element de active class verwijderd en terug toegevoegd.
$this.parent().siblings().removeClass('active').end().addClass('active');
Wat je echter beter kunt doen is op alle items de active class te verwijderen en enkel op het geclickte element hem terug toe voegen.
bv:
$('.navbar > ul.nav li a').click(function(e) {
var $this = $(this);
for ( var i = 0; i < navlink.length;i++){
var $element = $('.nav-link')[i];
$element.removeClass('active');
}
$this.parent().siblings().addClass('active');
e.preventDefault();
});
use php to add the name of the active page #home
#php
<?php
$active = 'home';
?>
#js
var active="<?php echo $active;?>";
$(document).ready(function(){
$("#"+active).addClass("active");
});
if you use php to load the page
Related
I am facing a weird issue with AdminLTE admin panel template which is I am using for my Angular 11 app. Its all loading the menu item. No issue with it. But when clicking an item refreshes the page instead of expanding the group.
Here is how it looks
When I clicking on Data Reconciliation for example, it reloads the page again. Then when I click it again, it expands the group
Here is the markup
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Data Reconciliation
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">Reports</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
What could be the reason? Is this issue have any connection with Angular?
Replace ALL
href="#"
by
[routerLink]=""
This should works.
I have two navigations. One sideNav and one navbar. The problem is that my sideNav overlaps everything. It's on top of the navbar and the footer. How can I move this under all of the layers? Here is an image to assist.. enter image description here I am using MVC with the navbar in my _layout.cshtml page, and the sidenav inside of my List.cshtml page.
SideNav
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-1 fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Websites<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul class="list-unstyled">
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Sort By Category<i class="fas rotate-icon"></i>
</a>
<li>
For authors
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> Marketing<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
Introduction
</li>
<li>
Monthly meetings
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<li>
<ul class="social">
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-pinterest"> </i></li>
<li><i class="fab fa-google-plus-g"> </i></li>
<li><i class="fab fa-twitter"> </i></li>
</ul>
</li>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
navbar
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="background-color: #4285f4">
<a class="navbar-brand font-weight-bold" asp-controller="Product" asp-action="List" id="navpadding"><strong>FIVEMANGO</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
#if (User.Identity.IsAuthenticated)
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Cart" asp-action="Index">
<i class="fas fa-shopping-cart blue-text"></i> Cart
</a>
</li>
<li class="nav-item dropdown ml-3">
<a class="nav-link dropdown-toggle waves-effect waves-light dark-grey-text font-weight-bold"
id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user blue-text"></i> Profile
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">
#*<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Login">Login</a>*#
<a class="dropdown-item waves-effect waves-light" asp-controller="User" asp-action="Index">View Orders</a>
<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Logout">Log out</a>
</div>
</li>
</ul>
}
else
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Register">
<i class="fas fa-registered blue-text"></i> Sign Up
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Login">
<i class="fas fa-user blue-text"></i> Login
</a>
</li>
</ul>
}
</div>
</nav>
i need to ask how to change Bootstrap 4 Navbar ordering because currently logo in left side but i want it become in the center and both side i have menu. can help me how to change this order?
Current Navbar Image check out please
<nav class="navbar navbar-light navbar-expand-lg sticky-top navigation-clean" data-aos="fade-down" data-aos-once="true" style="background-color:rgb(16,34,55);" data-toggle="affix">
<div class="container-fluid">
<a class="navbar-brand" href="#"> <img src="assets/img/logo.svg" class="largeLogo" id="Logo"></a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navcol-1" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" style="color: #FFC000"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user" style="color: #FFC000"></i>
</button>
<div class="collapse navbar-collapse " id="navcol-1">
<ul class="nav navbar-nav align-items-center ml-auto">
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-home" style="width:18px;"></i>Home</a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#cor"><i class="fa fa-book" style="width:18px;"></i>Courses</a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-user" style="width:18px;"></i>About Us</a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-star" style="width:18px;"></i>Contact Us</a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-facebook-square" style="width:18px;"></i></a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-twitter-square" style="width:18px;"></i></a></li>
<li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="icon ion-social-googleplus" style="width:18px;"></i></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="account">
<ul class="navbar-nav ml-auto align-items-end">
<li class="nav-item"><a class="nav-link" href="#">Register</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</div>
</nav>
u should search a little bit more because it's common question
.navbar {
position: relative;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
I am using Bootstrap Sb-Admin Template, and I want to use jquery cookie to remember the toggle state of my nav-bar.
The problem is when the page is reloaded the toggle state is forgotten. I would like to use the js-cookie to remember the last toggle state (collapsed or not). How do I use this cookie to remember the state?
// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});
// Force the toggled class to be removed when a collapsible nav link is clicked
$(".navbar-sidenav .nav-link-collapse").click(function(e) {
e.preventDefault();
$("body").removeClass("sidenav-toggled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="/">START <b>Q</b>UANTUM</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="/?page_id=1">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="/social/?page_id=2">
<i class="fa fa-fw fa-share-square-o"></i>
<span class="nav-link-text">Social Book</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="/attendance/?page_id=3" title="See Everything About Your Attendance">
<i class="fa fa-fw fa-area-chart"></i>
<span class="nav-link-text">Attendance</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
<a class="nav-link" href="/attendance/leave-data.php?page_id=4" title="Know about your leaves">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Leave / Day Off</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
<a class="nav-link" href="/payroll/?page_id=5" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-money"></i>
<span class="nav-link-text">Payroll</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-sitemap"></i>
<span class="nav-link-text">Subordinates</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
Approval
</li>
<li>
Under You
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Settings</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
General Profile
</li>
<li>
Security Settings
</li>
<li>
Blank Page
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="/reports/?page_id=10">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">Reports</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel">
<a class="nav-link special" href="/settings/hr-admin.php?page_id=11">
<i class="fa fa-fw fa-link"></i>
<span class="nav-link-text">HR - ADMIN</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel">
<a class="nav-link special" href="/control/?page_id=11">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span class="nav-link-text">Configuration</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
</div>
</nav>
How to remember the toogle state ?
So. You have some toggles and you could use localStorage to save their values. Depending of their amount you should save or one value or object that contains few values for each toggle. Then, you need to save to localStorage either by button or onChange. While page is loading you need to retrieve data.
There is an example for you https://codepen.io/CrUsH20/pen/aEWPKe?editors=1010
In case of multiple toggle needed save you just should organize gathering of data, convert it into object and JSON then. And retrieve data with converting JSON. There is an example of that case https://codepen.io/CrUsH20/pen/oBXaJR in Russian, though.
<label>Numer 1
<input onclick="update()" name="test" value="1" type="radio">
</label>
<label>Numer 2
<input onclick="update()" name="test" value="2" type="radio">
</label>
<label>Numer 3
<input onclick="update()" name="test" value="3" type="radio">
</label>
<button onclick="save()">Save</button>
JS
let current = null;
window.onload = () => {
let checked = localStorage.getItem("checked") || 1;
console.log('It works!\n\n'+checked);
if (checked) {
document.querySelector('input[value="'+checked+'"]').checked = true;
}
current = document.querySelector('input:checked').value;
}
function update() {
current = document.querySelector('input:checked').value;
console.log(current);
}
function save() {
localStorage.setItem("checked", current);
}
You should use the localStorage. Example:
localStorage.setItem('toggled', 'true');
To get the state back - even after page reloading -, you can use:
localStorage.getItem('toggled'); // true
Why localStorage?
Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read by the client-side. So the question is, in your app, who needs this data — the client or the server?
See this post.
Since you need the toggle state for rendering purposes, you will want to use localStorage.
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