I have a problem with twitter bootstrap. I created a simple dropdown menu, but when i inspect the code in chrome inspector, i see that the class nav nav-pills are added to the <ul class="dropdown-menu pull-right"> element.
How can i delete these classes ?
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
Here you have a jsfiddle with bootstrap using your code and nothing happends. You might wanna check your javascript code and event listeners because you might be adding these classes with javascript code by yourself.
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
Related
I have the following nested dropdown list. The child items are initially hidden and clicking on the parent toggles an "open" class to display the children.
I am trying to conditionally display the entire list with an ngIf, which works correctly. However, when my condition is true the open class toggle no longer works. Any reason why simply adding the ngIf condition breaks this functionality?
<li class="nav-item dropdown" *ngIf="isMHQEnabled"> //toggles correctly without the if condition
<a class="dropdown-toggle">
<i class="fal fa-exchange"></i>
<i class="fas fa-exchange"></i>
<span class="title">Broker Transfers</span>
<span class="arrow">
<i class="fas fa-chevron-down"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="initiateBrokerTransfer()">
<i class="fal fa-message-dots"></i>
<i class="fas fa-message-dots"></i>
<span class="title">Transfer Request</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="navigate('brokertransfer')">
<i class="fal fa-list-check"></i>
<i class="fas fa-list-check"></i>
<span class="title">Transfer Status</span>
</a>
</li>
</ul>
</li>
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.
I am currently having issues with my dropdown menus. I would like them to only open/close when the dropdown menu is clicked, not the list items or anywhere else in the body.
Here is my code that I am having the issues with:
<main>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span style="height:50px" />
</li>
<li class="dropdown" id="mi1">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</ul>
<div class="dropup">
<a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
<ul id="adminDropup" class="dropdown-menu" role="menu">
<li>Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</div>
</div>
I have tried adding inline javascript to "stopPropagation" however this has resulted in the dropdown menu not opening at all.
Here is a rough jsfiddle of what is happening with the dropdown menus in the left navigation bar: https://jsfiddle.net/jr_iridium/aqLa77ax/
I'm relatively new to bootstrap so please let me know if I have made any mistakes.
Thanks in advance.
Here is my answer, after long testing since I used to with Boostrap 3. By removing the data-toggle="dropdown" is the only way to remove auto close during outside clicks. Related to here but your question is Bootstrap 4
Try this:
https://jsfiddle.net/rigz/pdc4un6L/5/
If the fiddle doesn't work just let me know, I'm having weird issue in fiddle since I'm under corporate proxy posting this :P
Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>
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