Develop Reference

VueJS: How to toggle dropdown menu when new View is loaded?

I'm new to VueJS. I've worked with a static CSS framework for many years but I would like to learn more about VueJS. I have the following navigation code. The problem is that the dropdown menu is still visible if I load a new page. How do I need to adjust the JS code so that the dropdown menu also collapses when a new View is loaded via VueJS? I've tried a few things with methods under export default but nothing worked for me.
I'm using Vue 2.6.11.
Thanks for your help! :)
window.addEventListener(
'load',
function() {
let hamburgerMenu = document.getElementById('hamburger-menu')
hamburgerMenu.addEventListener(
'click',
function() {
hamburgerMenu.classList.toggle('is-active')
let navigation = document.getElementById('navigation')
navigation.classList.toggle('hamburger-toggle-nav-display-block')
hamburgerMenu.classList.toggle('z-index-9999')
},
false
)
},
false
)
<nav id="navigation">
<ul>
<li>
<router-link to="/projekte">Projekte</router-link>
</li>
<li>
<router-link to="/projekte/einzelprojekt">Einzelprojekt</router-link>
</li>
<li>
<router-link to="/kontakt">Kontakt</router-link>
</li>
</ul>
</nav>
<button
class="hamburger hamburger--collapse"
type="button"
id="hamburger-menu"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
<span class="hamburger-label">Menü</span>
</button>

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.

if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");

Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

Variable boolean doesnt work in a #Input and *ngif

sorry for my bad english, not my main language.
I got a problem, i have a boolean var in a father component to switch language. I have 2 ngifs in all my component to switch language if var is true or false.
app component:
public euskera: boolean;
constructor(){
this.euskera=false;
}
ngOnInit(): void {
}
setEuskera(){
this.euskera=true;
}
setCastellano(){
this.euskera=false;
}
app component html:
<div *ngIf="euskera">
<header id="header">
<img id="logo" src="../assets/img/logoSoinuka.png">
<nav id="nav">
<ul>
<li [routerLink]="['/inicio']"><a>hasiera</a></li>
<li [routerLink]="['/sobre-nosotros']"><a>nor gara?</a></li>
<li [routerLink]="['/proximos-eventos']"><a>hurrengo ekitaldiak</a></li>
<li [routerLink]="['/contacto']"><a>kontaktua</a></li>
<li (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()"><a>Hizkuntza:<span>[</span></a></li>
</ul>
</nav>
</header>
<div id="language" (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()">
<ul>
<li [routerLink]="['/inicio']" (click)="setCastellano()"><a>Gaztelania</a></li>
<li [routerLink]="['/inicio']" (click)="setEuskera()"><a>Euskara</a></li>
</ul>
</div>
<div class="son">
<app-home [euskera]="true"></app-home>
</div>
</div>
<div *ngIf="euskera==false">
<header id="header">
<img id="logo" src="../assets/img/logoSoinuka.png">
<nav id="nav">
<ul>
<li [routerLink]="['/inicio']"><a>Inicio</a></li>
<li [routerLink]="['/sobre-nosotros']"><a>¿Quienes somos?</a></li>
<li [routerLink]="['/proximos-eventos']"><a>Proximos eventos</a></li>
<li [routerLink]="['/contacto']"><a>Contacto</a></li>
<li (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()"><a>Lenguaje:<span>[</span></a></li>
</ul>
</nav>
</header>
<div id="language" (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()">
<ul>
<li [routerLink]="['/inicio']" (click)="setCastellano()"><a>Castellano</a></li>
<li [routerLink]="['/inicio']" (click)="setEuskera()"><a>Euskera</a></li>
</ul>
</div>
<div class="son">
<app-home [euskera]="false"></app-home>
</div>
</div>
<body>
<div id="content">
<router-outlet></router-outlet>
</div>
</body>
So far everything works. The problem is, when I pass the variable to the child and do the input.
Home component (child)
public title: string
#Input() euskera:boolean;
Home component html (child)
<div *ngIf="euskera">
euskk
</div>
<div *ngIf="euskera==false">
dd
</div>
At this point the Ifs stop working. It does neither of the two checks for me, neither false nor true.
When I reload the page, as soon as I start, when outputting the input value from the child through the console it gives me false (its real value) but then without doing anything it marks undefined.
Then it no longer matters if I press the button to change language and change the value of the variable since it does not modify the text of the child.
Anyone can help me? Thanks

use !euskera to check if a value is null or undefined or false
<div *ngIf="euskera">
euskara
</div>
<div *ngIf="!euskera">
castellano
</div>
You can also give a value by defect in input
#Input() euskera:boolean=false

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>

Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

Limiting events with e.preventDefault()

Force function toolbarInit() to fire only once.
There are 2 items with the class "nav". When I click on the link "Menu", I would like to see both nav's open.
Right now, the event runs twice (once for each nav) so you see the slidetoggle run multiple times. so rather than it opening, closing, and reopening, i just want it to open a single time.
shouldn't my use of e.preventDefault() prevent the function from running multiple times?
See my Codepen
HTML:
<nav id="people-menu" class="nav people-nav">
<div class="wrap">
<div class="region region-audience-links">
<div class="block">
<div class="content">
<ul class="row in"><div class="split-left"><li class="first leaf menu-level-1">Alumni</li>
<li class="leaf menu-level-1">Current Students</li>
<li class="leaf menu-level-1">Faculty</li>
</div><div class="split-right"><li class="leaf menu-level-1">Parents</li>
<li class="leaf menu-level-1">Prospective Students</li>
<li class="last leaf menu-level-1">School Counselors</li>
</div></ul> </div>
</div>
</div>
</div>
</nav>
<ul class="header-toolbar-triggers row">
<li><span class="icon-menu"></span><span class="nodisplay">Menu</span></li>
</ul>
<nav id="global-menu" class="global-nav nav" role="navigation">
<div class="wrap">
<div class="in">
<div class="region region-header">
<div id="block-menu-menu-primary-menu" class="block block-menu">
<div class="content">
<ul class="menu"><li class="first leaf">About</li>
<li class="leaf">Admissions</li>
<li class="leaf">Financial Aid</li>
<li class="leaf">Academics</li>
<li class="last leaf">Student & Residential Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Javascript/JQuery
function toolbarRespond() {
if ($(window).innerWidth() < 795) {
$('.nav').hide();
}
}
function toolbarInit() {
$('.header-toolbar-triggers a').on('click', function(e) {
var toolbarTarget = $(this).attr('data-target');
$('.'+toolbarTarget).slideToggle(500);
e.preventDefault();
});
}
$(document).ready(function() {
toolbarRespond();
toolbarInit();
window.onresize = function(event) {
toolbarRespond();
toolbarInit();
}
});

The preventDefault() method only stops the browser from performing the event's default action. In this case, that action would be to follow the link to its location. Your call to e.preventDefault() is why the browser doesn't navigate to the #global-menu URL.
The reason you're seeing multiple runs of the bound functionality is that you're running toolbarInit() multiple times--thereby binding the click multiple times. You run it at document ready, but then you bound it to run every time the window resizes as well.
In your simple sample code, there is no need to run toolbarInit() on resize of the window. If your real-life code is more complex, you need to separate the click binding out and stop calling it on resize.