Activating the menu working only after two clicks - javascript

I have a menu that when I click on something the menu becomes active and is highlighted.
The code works fine, I don't know if it's a problem in the blazor or it's something in my code anyway.
But what's happening is the following, when I open the application and I click once on some of the menus nothing happens, then if I click again the menu starts to work normally with just one click
HTML Code:
<div>
<ul class="nav" onclick="ActiveTest()">
<li>
<a href="#" class="active">
<i class="fas fa-home"></i>
<span class="name">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-book-reader"></i>
<span class="name">Reader</span>
</a>
</li>
...
</ul>
</div>
JS:
function ActiveTest() {
$(".nav li a").click(function () {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
}
Anyone who has had this problem can tell me a way to make this work without this two-click issue when the app is opened

The first click you are calling ActiveTest which then adds the click event to all the <li> in your code.
You probably want something like this instead.
HTML
<div class="bar">
<ul class="nav">
<li >
<a href="#" onclick="OpenMenu(this)" class="active">
<i class="fas fa-home"></i>
<span class="name">Home</span>
</a>
</li>
<li>
<a href="#" onclick="OpenMenu(this)">
<i class="fas fa-book-reader"></i>
<span class="name">Reader</span>
</a>
</li>
</ul>
</div>
JS
function OpenMenu(el) {
$(".nav li a").removeClass("active");
$(el).addClass("active");
}

Related

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default
You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});
Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...
You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

Adding second child to dropdown menu

Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.
The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.

jquery getting icon from <li> tag and place it to a dropdown icon in button

I have created dropdown with accordion using bootstrap. what im going to do is when they click dropdown header <li> get icon and place it to dropdown button
<button class="btn btn-search catbutton dropdown" type="button" data-toggle="dropdown">
span class="label-icon"><i class="fa fa-bars"></i></span>
</button>
<ul class="dropdown-menu accordion" role="menu">
<li role="presentation" class="have-child">
<a class="link" role="menuitem">
<i class="fa fa-building"></i>Properties<i class="fa fa-chevron-down"></i>
</a>
<ul id="properties" class="panel-collapse collapse submenu">
<li><a>All</a></li>
<li><a>Property For Sale</a></li>
<li><a>Property For Rent</a></li>
<li><a>Land For Sale</a></li>
</ul>
</li>
</ul>
I have manage to get the text and place it there but not the icon down below
$(".dropdown-menu li a").click(function () {
$(".catbutton").text($(this).text());
});
Please help me to solve this
You are just working with text not html ,if you want the icon onclick then
try this
$(".dropdown-menu li a").click(function () {
$(".catbutton").html($(this).html());
});
I thing it will help you.
I found the solution for this
js should be as follow
$(".dropdown-menu li a").click(function () {
$(".catbutton").html($(this).find('.geticon').html());
});
HTML needs to change as follow
<div class="geticon"><i class="fa fa-building"></i>
adding class for icon what i need to get and add there is the solution for these
thank you guradio for guide me

Bootstrap nav-list could not stay expand when pageload

Struggle in this question quite some time, i have try through several way to fix this, but there are not hope signed.
code for html:
<ul class="nav nav-list" >
<li class="active" >
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-sitemap"></i>
<span class="menu-text" >
Menu
<b class="arrow fa fa-angle-down"></b>
<ul class="submenu" >
<li class="#" >
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-map-marker"></i>
<span class="menu-text" >
Burger Choice
<b class="arrow fa fa-angle-down"></b>
<ul class="submenu">
<li class="#" >
<asp:LinkButton runat="server" id="Burgerset" onClick="MenuSet_Click" CommandArgument="Chicken Burger:0">
<i class="menu-icon fa fa-caret-right"></i> BurgetSet
</asp:LinkButton>
</li>
</li>
<ul>
Here is the script:
$(document).ready(function () {
$('.nav li a').click(function () {
var $this = $(this);
$this.parent().siblings().removeClass('active').end().addClass('active');
});
});
How to can make the menu click and the nav-list still keep expand?
so far now only the asp:LinkButton have link with others webpage,
but it will reset back to Menu won't stay inside list link after click.
The way i want is the list will memorized user click.

How to add active class only on second level of the navigation

I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});
You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});
i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.

Categories