We Keep Coding

Activating the menu working only after two clicks

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");
}

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();
});

Jquery not recognize menu include

I have my index calls from other HTML pages using the library CSI.js
my index:
<div class="col-6 col-md-2" id="nav">
<div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>
in menu page:
<div class="sticky-menu" id="sticky-menu">
<div class="sticky-menu-header">
<img class="logo" src="./img/logo-branco.svg" />
</div>
<ul>
<li class="active"><i class="fa fa-home"></i>Home </li>
<li><i class="fa fa-glass"></i>Eventos </li>
<li><i class="fa fa-file-image-o"></i>Alertas <span class="sticky-menu-label">4 </span></li>
<li><i class="fa fa-cog"></i>Indicadores
<ul class="submenu">
<li>Teste</li>
<li>Teste </li>
<li>
Teste
<ul class="submenu">
<li>Teste </li>
</ul>
</li>
<li>Consulting </li>
</ul>
</li>
<li>
<i class="fa fa-suitcase"></i>Grafana
<ul class="submenu">
<li>Item 0 </li>
<li>Item 1 <span class="sticky-menu-label">10 </span></li>
</ul>
</li>
</ul>
</div>
submenu have dropdown animation with jquery:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
On the menu page (sticky-menu.html) it works fine, like this:
https://i.stack.imgur.com/oAPds.png
Notice that the + sign appears when clicked:
https://i.stack.imgur.com/9OJIu.png
However, not index.html, menu (jquery) does not work:
https://i.stack.imgur.com/tvBRR.png
When I enter the code in the console:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
it works: https://i.stack.imgur.com/YZe8y.png
I've included the js code on both pages, I think it's silly, but I really can not. Thank you for your help.
EDIT:
I noticed that my sticky-menu.html is wearing after the script. How to solve?
https://i.stack.imgur.com/j1Pzu.png
EDIT 2 :
I solved with requireJS.

You could run some code as follows
function waitForElement(id, callback){
var checkForElement = setInterval(function(){
if(document.getElementById(id)){
clearInterval(checkForElement);
callback();
}
}, 100);
}
waitForElement("idOfElementToWaitFor", function(){
alert("element is loaded.. do stuff");
});
Where your id for your element would be #sticky-menu and your callback function would be jQuery("#sticky-menu").jqueryAccordionMenu();

fadeToggle is not a function

I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li>About</li>
<li>Services</li>
<li>Work</li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>About
<ul>
<li>About Company</li>
<li>Designers</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Development</li>
<li>Apps</li>
<li>Graphic design</li>
<li>Branding</li>
</ul>
</li>
<li>Work
<ul>
<li>Web</li>
<li>Graphic</li>
<li>Apps</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: mario-loncarek.from.hr
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!

Just a heads up, I ran into this issue because I unknowingly had included the SLIM build which apparently jettisons pretty animations such as fadeToggle.

Javascript Submenu Issue

Disclaimer! ... I am not real keen on front end development.
I have a nav menu that has two sub-menus. I am using the Symfony 3 framework for the application, so twig is involved. My base template has the navigation code so it should be available on all extended twig pages. Here is the html
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-th"></i> Dashboard
</li>
<li><i class="glyphicon glyphicon-stats"></i> Emails</li>
<li><i class="glyphicon glyphicon-user"></i> Users</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Admin
<span class="caret pull-right"></span>
</a>
<ul>
<li><i class="glyphicon glyphicon-user"></i> My Profile</li>
<li>Change Password</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Public Pages
<span class="caret pull-right"></span>
</a>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</li>
<li>Logout</li>
</ul>
On the dashboard page it works just as expected.When "Admin" is clicked, the sub menu opens and the sub links are displayed. Click the other, the first sub menu closes and the other opens up.
However, when I switch to another page such as "Emails" when any of the sub menus are clicked it immediately closes. I have tried multiple ways to try and fix this but it does not seem to work. Here is the javascript for "submenu"
$(".submenu > a").click(function(e) {
e.preventDefault();
var $li = $(this).parent("li");
var $ul = $(this).next("ul");
if($li.hasClass("open")) {
$ul.slideUp(350);
$li.removeClass("open");
} else {
$(".nav > li > ul").slideUp(350);
$(".nav > li").removeClass("open");
$ul.slideDown(350);
$li.addClass("open");
}
});
Thank you for your help.