jQuery toggle submenu a href is not working - html

I have a menu and the link or "a href click" is not working.
jQuery does not give any errors that I am aware of, and the menu opens as desired, but nothing seems to take the user to stackoverflow.com for the link in my code below. I tried .parent a, but maybe this is not correct.
I made this example based on the example below which is slightly different from the code I posted below.
jsfiddle
$(function () {
$(".submenu").hide();
$(".parent a").click(function (e) {
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});
.year_2014 .monthly-archive {
display: none;
}
.january .archive {
display: none;
}
.february .archive {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="menu">
<ul>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
</ul>
</li>
</ul>
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Click
</li>
</ul>
</li>
</ul>
</div>

If I using $(".parent > a").click(function (e) can click a link and redirect to link
$(function () {
$(".submenu").hide();
$(".parent > a").click(function (e) {
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="menu">
<ul>
<li class="parent">Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
</ul>
</li>
</ul>
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Click
</li>
</ul>
</li>
</ul>
</div>

Related

The rollover of a specific menu item is not showing the hidden sub menu

I created some classes for the menu items, so I can call upon them.
.dropdownBox {
display: none;
}
.dropdown li:hover > ul.dropdownBox {
display: block;
}
However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.
just update your CSS. Hope this will work for you.
.dropdownBox {
display: none;
}
.dropdown:hover + .dropdownBox {
display: block;
}
.dropdownBox:hover {
display: block;
}
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>

Keep parent menu toggle Jquery

Hello I need to keep parent menu open when a corresponding submenu has been selected.
I have the following code for the menu
var $menu = $('#menu'),
$menu_openers = $menu.children('ul').find('.opener');
// Openers.
$menu_openers.each(function() {
var $this = $(this);
$this.on('click', function(event) {
// Prevent default.
event.preventDefault();
// Toggle.
$menu_openers.not($this).removeClass('active');
$this.toggleClass('active');
// Trigger resize (sidebar lock).
$window.triggerHandler('resize.sidebar-lock');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
<li>
<span class="opener">Another Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
</ul>
</nav>
How I could achieve to keep it open base on selection?
thank you!
$('.opener').on('click', function(event) {
$(this).next().toggleClass('active');
});
#menu ul li ul
{
display:none;
}
.active{
display:block !important;
}
.opener{
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span class="opener">Submenu</span>
<ul class="submenu deactive">
<li>Lorem Dolor1</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
<li>
<span class="opener">Another Submenu</span>
<ul class="submenu deactive">
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
</ul>
</nav>

addClass to specific element

I created a list (li) and I want to add a specific class to that list
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext"></span>
</li>
</ul>
<li>
</ul>
I want to add a class to only that first ul > second li > first span class but for some reasons it is also adding it to that span class under the second ul.
This is the code I'm using to add the class
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
Snippet:
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
.another-ext {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext">hello</span>
</li>
</ul>
<li>
</ul>
Use children selector. It should work.
$('ul.main > li:nth-child(2) > .ext').addClass('another-ext')
.another-ext {color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>A</li>
<li>
<span class="ext">B</span>
<ul>
<li>
<span class="ext">C</span>
</li>
</ul>
<li>D
</ul>

Dropdown menu inside of another drop down menu is not working

I'm having trouble getting a drop-down menu inside another dropdown menu to work. The first level dropdown works fine, but for the second level, when I click on the option for the dropdown menu (Learning Profiles) nothing happens... the menu fails to display.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class="dropdown">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
there is little change in the html
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class ="dropdown-submenu">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
and add the following css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
also you need to add javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
working plunker : https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview

How to get elements of an internal class element?

I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>