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>
Related
I want to implement https://codepen.io/brenden/pen/VLjKMQ/ this menu in my project/website but I can't get the menu to close after I click any link or even navigate it to my desired section(of my one-page website).
<h1>Your Content</h1>
<div class="outer-menu">
<input class="checkbox-toggle" type="checkbox" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
// bind a click listener to the entire menu
document.querySelector('.menu').addEventListener('click', function(e){
// check to see if the element clicked was a link
if (e.target.tagName === 'A') {
// set the checkbox to checked false
document.querySelector('.checkbox-toggle').checked = false;
}
});
I want to get grand parent id by clicking on every child, Used event.target.parentNode.id but it just return parent of current element, the goal is get #HereIAm id when you click on every childs. any idea?
$(window).click(function(event) {
console.log(event.target.parentNode.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HereIAm">
<ul>
<li><a>click me</a></li>
<li>click me</li>
</ul>
<span>click me</span>
<div>
<div>
<span>click me</span>
</div>
</div>
</div>
Given the HTML, one option is to use .closest and use the selector string div[id] to select the nearest ancestor with an id attribute:
$(document).click(function({ target }) {
const closest = target.closest('div[id]');
if (closest) console.log(closest.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HereIAm">
<ul>
<li><a>click me</a></li>
<li>click me</li>
</ul>
<span>click me</span>
<div>
<div>
<span>click me</span>
</div>
</div>
</div>
If you want to get HereIAm by taping click me you can simply access parent of the parent of click me
function getGrandParent(target){
if(target.parentElement.id === 'HereIAm'){
console.log(target.parentElement.id)
}else{
getGrandParent(target.parentElement);
}
}
<div id="HereIAm">
<ul>
<li onclick='getGrandParent(this)'><a>click me</a></li>
<li onclick='getGrandParent(this)'>click me</li>
</ul>
<span onclick='getGrandParent(this)'>click me</span>
<div>
<div>
<span onclick='getGrandParent(this)'>click me</span>
</div>
</div>
</div>
First, my HTML tag is here
<ul>
<li>
<form>...</form>
<div>
<div class="A"></div>
<div class="B"><img class="wantToShow"></div>
</div>
<div class="C"></div>
</li>
<li>...</li>
</ul>
What I want to do is that when I mouse over <li>, the small image, <img class="wantToShow"> , is shown up(like hover).
But when I add event on each <li> element the following problems occur.
If I use jQuery.mouseover(<li>, function), the whole element in <li> shown up whenever I move mouse cursor in <li>.
If I use jQuery.mouseenter(<li>, function), an element, my mouse cursor enter at first, shown up. In this case, the real problem is that the event do not catch <li> but an element in <li>.
What can I do for this... Thank you!
I think something like this is what you are after:
$('li').on('mouseover',function() {
var $this = $(this);
if($('.wantToShow').is(':hidden')) {
$this.find('.wantToShow').show();
} else {
$this.find('.wantToShow').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<form>This is A</form>
<div>
<div class="A"></div>
<div class="B">
<img src='https://placebear.com/200/300' class="wantToShow">
</div>
</div>
<div class="C"></div>
</li>
<li>This is B</li>
</ul>
I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?
First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.
$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.
I've got a problem. I have some submenus on my website that i show and hide with jQuery.
The #Sekundar is the submenu, but what i want to ask about is, Is there a better way to check if the menu is shown or not shown?
I couldn't get it make it work unless i put a setInterval on it, and that isn't the best way of doing it i think? Any suggestions?
Here is the JS code:
function sekundarmenu() {
$('#sekundar').fadeToggle();
$('#sekundar2').hide();
$('#sekundar3').hide();
$('#sekundar4').hide();
$('#sekundar5').hide();
}
setInterval(function () {
if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
$("#li1").css("background-color", "#24ac5f");
}
else {
$("#li1").css("background-color", "transparent");
}
}, 1);
And the HTML:
<nav id="primar">
<ul>
<li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
<li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
<li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
<li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
<li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
Since there are many ways to solve similar problems you have to choose the one that best suits your case.
in this Fiddle
i thought to solve the problem in another way by adding some classes in your html code. In this way the jQuery code is drastically reduced.
I also added the ability to disappear the submenu on mouseleave, if you don't like this solution you can easily delete the lines of code highlighted in the fiddle.
If you like this solution remember to flag in green my answer ;)
all jQuery code you need is:
<script type="text/javascript">
$(document).ready(function(){
$('li.principal').click(function(){
var whatSubmenu=$(this).attr('id').slice(1)
$('li.principal').css("background-color", "transparent")
$(this).css("background-color", "#24ac5f")
$('div.sekundar').hide()
$('.'+whatSubmenu).fadeIn()
})
/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
$('div.sekundar').on('mouseleave',function(){
$(this).hide()
$('li.principal').css("background-color", "transparent")
})
})
</script>
html:
<header>
<nav id="primar">
<ul>
<li class="principal" id="li1"><a class="pointer">Indhold</a></li>
<li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
<li class="principal" id="li3"><a class="pointer">Billeder</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar i1">
<nav class="nav2">
<ul>
<li>Osadff</li>
<li>Rwefewg</li>
<li>Reehjy</li>
</ul>
</nav>
</div>
<div id="sekundar2" class="sekundar i2">
<nav class="nav2">
<ul>
<li>dgdgdg</li>
<li>sdfdfdg</li>
</ul>
</nav>
</div>
<div id="sekundar3" class="sekundar i3">
<nav class="nav2">
<ul>
<li>defdgdgdg</li>
</ul>
</nav>
</div>
In this simple example, you have a button that displays or hides your sub menu.
To verify if the menu is visible just give it a class using the toggleclass method and then check for the presence of that class.
<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').click(function(){
$('#sekundar').toggleClass('visible')
if($('#sekundar').hasClass('visible')){
alert('not visible')
$('#sekundar').show()
}else{
alert('visible')
$('#sekundar').hide()
}
})
})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>