In this dropdown nav I'm building if a dropdown is opened and you click to open a second one, the black box should remain visible. At the moment the black box disappears when you click on a second dropdown and reappears after the dropdown is completely opened.
Update
I also noticed the black box shows after a dropdown is open and it should open at the same time.
I hope this makes sense and thank you for your help!
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
If you want black-bg being added once the menu is clicked, then do not remove and add black-bg class on every click event. Simply add it once if the menu have active class and remove it when menu do not active class. If you remove and add class on every click event then black-bg will first disappear and again it will appear. To black-bg at the time drop-down is open then remove $(".main-container").addClass("black-bg"); from callback function of slideDown() because a callback function is executed after the current effect is finished.
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
if (menu.hasClass('active')) {
menu.removeClass('active');
$(".main-container").removeClass("black-bg");
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500);
$(".main-container").addClass("black-bg");
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
Just move $(".main-container").removeClass("black-bg"); into if (menu.hasClass('active')) {
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
//$(".main-container").removeClass("black-bg"); FROM HERE
if (menu.hasClass('active')) {
menu.removeClass('active');
$(".main-container").removeClass("black-bg"); // TO HERE
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
Is this what you are looking for?
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
The black box will remain there in this case. What you were previously doing was that you were removing black-box explicitly.
Related
I always used the script from this answer from #Sushanth -- to slide images on single pages. It's perfect.
The problem, it only works on one slider per page, now I'm in a project where I have to place different small sliders associated with buttons and obviously, it doesn't work, or rather, only the first one works. It has taken me a long time to understand the script, as I have read in other answers, I guess it's something about assigning a different ID to each slider, but I cannot find the solution.
In the example snippet, the round button links to the first slider, the one that works. The square button links to the second slider (with three slides) but it doesn't work. Since sliders are links, each slider has its own set of next, prev, and close buttons.
var $first = $('li:first', 'ul'),
$last = $('li:last', 'ul');
// Have the first and last li's set to a variable
$("#next").click(function() {
var $next,
$selected = $(".selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev").click(function() {
var $prev,
$selected = $(".selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
* {
text-decoration: none;
}
.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
cursor: pointer;
z-index: 1500;
color: #C2C6D2;
font-size: 3rem;
margin-top: 3rem;
}
.fstbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f111";
font-weight: 900;
}
.scndbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f0c8";
font-weight: 900;
}
.pre:before {
font-family: 'Font Awesome 5 free';
content: "\f060";
font-weight: 900;
}
.post:before {
font-family: 'Font Awesome 5 free';
content: "\f061";
font-weight: 900;
}
.BACK:before {
font-family: 'Font Awesome 5 free';
content: "\f00d";
font-weight: 900;
}
/* pop-up */
.popup {
position: fixed;
top: 0;
padding-top: 2rem;
width: 100%;
height: 100%;
display: none;
text-align: center;
background: #ecf0fa;
z-index: 20;
opacity: 1;
overflow: hidden;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0, 2s;
animation-name: fadein;
animation-duration: 0.2s;
height: 100%;
}
/*SLIDER*/
.SLIDER {
position: absolute;
top: -1.4rem;
right: 7rem;
display: flex;
gap: 1.5rem;
}
li {
display: none;
width: fit-content;
height: fit-content;
padding: 1rem 2rem;
}
.selected,
.linked:last-child {
display: block;
}
/*FIN SLIDER*/
.yl {
background: yellow;
}
.br {
background: brown;
}
.bl {
background: blue;
}
.pi {
background: pink;
}
.re {
background: red;
}
.or {
background: orange;
}
.cy {
background: cyan;
}
.gr {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>
<div id="firstslider" class="popup">
<ul>
<li class="linked yl">
<h3>Yellow</h3>
</li>
<li class="linked bl">
<h3>Blue</h3></li>
<li class="linked br">
<h3>Brown</h3></li>
<li class="linked cy">
<h3>Cyan</h3></li>
<li class="linked gr">
<h3>Green</h3></li>
</ul>
<div class="SLIDER">
<div id="prev" class="pre"></div>
<div id="next" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
<div id="scndslider" class="popup">
<ul>
<li class="linked pi">
<h3>Pink</h3>
</li>
<li class="linked re">
<h3>Red</h3></li>
<li class="linked or">
<h3>Orange</h3></li>
</ul>
<div class="SLIDER">
<div id="prev2" class="pre"></div>
<div id="next2" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
The easiest way is to bind click events using different IDs for prev and next element.
Here I used #prev2 and #next2, and duplicated your functions, limiting each set of buttons to #firstslider and #scndslider
var $first = $('#firstslider li:first'),
$last = $('#firstslider li:last');
var $first2 = $('#scndslider li:first'),
$last2 = $('#scndslider li:last');
// Have the first and last li's set to a variable
$("#next").click(function() {
var $next,
$selected = $("#firstslider .selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev").click(function() {
var $prev,
$selected = $("#firstslider .selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
// Have the first and last li's set to a variable
$("#next2").click(function() {
var $next,
$selected = $("#scndslider .selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first2;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev2").click(function() {
var $prev,
$selected = $("#scndslider .selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last2;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
* {
text-decoration: none;
}
.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
cursor: pointer;
z-index: 1500;
color: #C2C6D2;
font-size: 3rem;
margin-top: 3rem;
}
.fstbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f111";
font-weight: 900;
}
.scndbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f0c8";
font-weight: 900;
}
.pre:before {
font-family: 'Font Awesome 5 free';
content: "\f060";
font-weight: 900;
}
.post:before {
font-family: 'Font Awesome 5 free';
content: "\f061";
font-weight: 900;
}
.BACK:before {
font-family: 'Font Awesome 5 free';
content: "\f00d";
font-weight: 900;
}
/* pop-up */
.popup {
position: fixed;
top: 0;
padding-top: 2rem;
width: 100%;
height: 100%;
display: none;
text-align: center;
background: #ecf0fa;
z-index: 20;
opacity: 1;
overflow: hidden;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0, 2s;
animation-name: fadein;
animation-duration: 0.2s;
height: 100%;
}
/*SLIDER*/
.SLIDER {
position: absolute;
top: -1.4rem;
right: 7rem;
display: flex;
gap: 1.5rem;
}
li {
display: none;
width: fit-content;
height: fit-content;
padding: 1rem 2rem;
}
.selected,
.linked:last-child {
display: block;
}
/*FIN SLIDER*/
.yl {
background: yellow;
}
.br {
background: brown;
}
.bl {
background: blue;
}
.pi {
background: pink;
}
.re {
background: red;
}
.or {
background: orange;
}
.cy {
background: cyan;
}
.gr {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>
<div id="firstslider" class="popup">
<ul>
<li class="linked yl">
<h3>Yellow</h3>
</li>
<li class="linked bl">
<h3>Blue</li>
<li class="linked br">
<h3>Brown</li>
<li class="linked cy">
<h3>Cyan</li>
<li class="linked gr">
<h3>Green</li>
</ul>
<div class="SLIDER">
<div id="prev" class="pre"></div>
<div id="next" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
<div id="scndslider" class="popup">
<ul>
<li class="linked pi">
<h3>Pink</h3>
</li>
<li class="linked re">
<h3>Red</li>
<li class="linked or">
<h3>Orange</li>
</ul>
<div class="SLIDER">
<div id="prev2" class="pre"></div>
<div id="next2" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
This snippet I supposed to work but it is not working. On click it adds the class to the parent element, but on click of a child element it doesn't remove the class. I also added JS Fiddle to test for you. Thanks in advance.
JS Fiddle: https://jsfiddle.net/fghjqepv/1/
jQuery(document).ready(function($) {
$(".menu-item-has-children").addClass("openLevel js-openLevel");
var $menuTrigger = $('.js-menuToggle');
var $topNav = $('.js-topPushNav');
var $openLevel = $('.js-openLevel');
var $closeLevel = $('.js-closeLevel');
var $closeLevelTop = $('.js-closeLevelTop');
var $navLevel = $('.js-pushNavLevel');
function openPushNav() {
$topNav.addClass('isOpen');
//$('body').addClass('pushNavIsOpen');
}
function closePushNav() {
$topNav.removeClass('isOpen');
$openLevel.siblings().removeClass('isOpen');
//$('body').removeClass('pushNavIsOpen');
}
$menuTrigger.on('click touchstart', function(e) {
e.preventDefault();
if ($topNav.hasClass('isOpen')) {
closePushNav();
} else {
openPushNav();
}
});
$openLevel.on('click touchstart', function() {
$(this).find($navLevel).addClass('isOpen');
});
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('isOpen');
});
$closeLevelTop.on('click touchstart', function() {
closePushNav();
});
});
#media screen and (max-width: 600px) {
.pushNav {
width: 75%;
right: -75%;
}
}
#media screen and (min-width: 601px) {
.pushNav {
width: 350px;
right: -350px;
}
}
ul.pushNav {
padding: 0;
margin: 0;
list-style-type: none;
}
.pushNav {
height: 100%;
position: fixed;
top: 0;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
background: #2e2f35;
transition: ease-in-out 0.5s;
}
.pushNav hr {
border: 1px solid #555;
}
.pushNav,
.pushNav a {
font-size: 1em;
font-family: helvetica, sens-serif;
font-weight: 100;
color: #fff;
text-decoration: none;
}
.pushNavIsOpen {
overflow: auto;
height: 100%;
}
.js-topPushNav.isOpen,
.pushNav_level.isOpen {
right: 0;
}
.closeLevel,
.openLevel {
cursor: pointer;
}
.openLevel,
.closeLevel,
.pushNav a {
padding: 1em 0;
display: block;
text-indent: 20px;
transition: background 0.4s ease-in-out;
}
.openLevel:hover,
.closeLevel:hover,
.pushNav a:hover {
background: #494a50;
}
.hdg {
background-color: #1e1e24;
}
.closeLevel,
closelevel>i {
font-size: 1em;
color: #a5a5a4;
}
.burger {
position: absolute;
top: 24px;
right: 48px;
}
.burger i {
font-size: 3em;
}
.screen {
position: fixed;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.pushNavIsOpen .screen {
height: 100%;
opacity: 1;
}
.fa {
display: inline;
padding: 5px;
}
.wrapper {
max-width: 625px;
margin: 120px auto;
padding: 0 20px;
color: #fff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: 100;
font-size: 1.1em;
line-height: 1.4em;
}
.wrapper a {
color: #20c270;
text-decoration: none;
}
.wrapper button {
background-color: #20c270;
margin: 50px auto;
display: block;
padding: 10px 40px;
border: none;
}
.wrapper button:hover {
background-color: #18a960;
}
.wrapper button a {
color: #fff;
font-size: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="js-menuToggle">Click Me To Open</div>
<div class="pushNav js-topPushNav">
<div class="closeLevel js-closeLevelTop hdg">
<i class="fa fa-close"></i>
</div>
<div id="sidebar-menu-container" class=" meain-container">
<ul id="menu-header-menu" class="header_menu menu-level-1">
<li id="menu-item-6064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6064 openLevel js-openLevel">
Sub Menu
<div class="pushNav level-2 pushNav_level js-pushNavLevel">< Go Back
<h4>Sub Menu Title</h4>
<h2></h2>
<ul class="sub-menu">
<li id="menu-item-6019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6019">Checkout</li>
</ul>
</div>
</li>
<li id="menu-item-6022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6022">Sample Page</li>
<li id="menu-item-6063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6063 openLevel js-openLevel">
Sub Menu Con
<div class="pushNav level-2 pushNav_level js-pushNavLevel">< Go Back
<h4>Sub Menu Title</h4>
<h2></h2>
<ul class="sub-menu">
<li id="menu-item-6025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6025">Blog – Masonry Boxed
</li>
</ul>
</div>
</li>
<li id="menu-item-6065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6065">3rd menu</li>
</ul>
</div>
</div>
When we click on "GO Back" Button, it does not remove the class (isOpen). Go back button is on Level 2 after clicking the Sub Menu Item.
When using .on() it can be a little finicky with the way event bubble up.
https://jsfiddle.net/Twisty/2xf7rk6g/9
JavaScript
jQuery(document).ready(function($) {
$(".menu-item-has-children").addClass("openLevel js-openLevel");
var $menuTrigger = $('.js-menuToggle');
var $topNav = $('.js-topPushNav');
var $openLevel = $('.js-openLevel');
var $closeLevel = $('.js-closeLevel');
var $closeLevelTop = $('.js-closeLevelTop');
var $navLevel = $('.js-pushNavLevel');
function openPushNav() {
$topNav.addClass('isOpen');
//$('body').addClass('pushNavIsOpen');
}
function closePushNav() {
$topNav.removeClass('isOpen');
$openLevel.siblings().removeClass('isOpen');
//$('body').removeClass('pushNavIsOpen');
}
$menuTrigger.on('click touchstart', function(e) {
e.preventDefault();
if ($topNav.hasClass('isOpen')) {
closePushNav();
} else {
openPushNav();
}
});
$openLevel.on('click touchstart', function() {
console.log("Open");
$(this).find($navLevel).addClass('isOpen');
});
$(".pushNav")
.on('click touchstart', ".js-closeLevel", function() {
console.log("Close");
$(this).parent().removeClass('isOpen');
})
.on('click touchstart', ".js-closeLevelTop", function() {
console.log("cLose Top");
closePushNav();
});
});
This is less ambiguous and the event is being triggered as expected.
replace this function
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('isOpen');
});
with this
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('pushNav_level isOpen');
});
I'm not a developer. I've been however tasked with coming up with a solution for a small project at work with jQuery and I have no clue where to begin. Here's my codepen: https://codepen.io/axo1/pen/mdBLRjL
What I need to is this (all graphics and texts are placeholders):
What I managed to achieve
Image item1 is supposed to be the first visible,
Hovering on the buttons below the graphic changes which image is displayed,
What I don't know how to achieve
The buttons below should be clickable. Clicking on a button changes the "active" graphic above. For example: if I click on the Second item button, the item2 image will be displayed even after I unhover the button, and so forth.
Any tips of what I should look into?
Unfortunately jQuery is heavily preferred here.
$(document).on({
mouseenter: function() {
$(".item1").toggleClass("active hidden");
$(".item2").toggleClass("hidden");
},
mouseleave: function() {
$(".item1").toggleClass("active hidden");
$(".item2").toggleClass("hidden");
}
}, ".item2btn");
$(document).on({
mouseenter: function() {
$(".item1").toggleClass("active hidden");
$(".item3").toggleClass("hidden");
},
mouseleave: function() {
$(".item1").toggleClass("active hidden");
$(".item3").toggleClass("hidden");
}
}, ".item3btn");
img {
max-width: 15%;
position: absolute;
top: 0;
left: 0;
}
.hidden {
visibility: hidden;
}
.active {
visibility: visible;
}
#container {
display: flex;
justify-content: flex-start;
align-items: center;
color: white;
position: absolute;
top: 250px;
}
#container ul {
padding: 1em;
}
#container ul>li {
background: black;
margin: 1em;
padding: 1em;
list-style-type: none;
display: inline;
}
#container ul>li:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">
<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">
<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">
<div id="container">
<ul>
<li class="item1btn">First item</li>
<li class="item2btn">Second item</li>
<li class="item3btn">Third item</li>
</ul>
</div>
Here is a working version
I kept your style - I think it can be shortened to be more DRY
const $images = $(".items")
let $currentItem = $(".items").eq(0)
$("#container li").on({
"click": function() {
const id = $(this).data("id").replace("btn", "");
$images
.removeClass("active")
.addClass("hidden")
$currentItem = $(`.${id}`)
.removeClass("hidden")
.addClass("active");
},
"mouseover": function() {
const id = $(this).data("id").replace("btn", "");
$images
.removeClass("active")
.addClass("hidden")
$(`.${id}`)
.removeClass("hidden")
.addClass("active");
},
"mouseout": function() {
$images
.removeClass("active")
.addClass("hidden")
$currentItem
.removeClass("hidden")
.addClass("active");
}
})
img {
max-width: 15%;
position: absolute;
top: 0;
left: 0;
}
.hidden {
visibility: hidden;
}
.active {
visibility: visible;
}
#container {
display: flex;
justify-content: flex-start;
align-items: center;
color: white;
position: absolute;
top: 250px;
}
#container ul {
padding: 1em;
}
#container ul>li {
background: black;
margin: 1em;
padding: 1em;
list-style-type: none;
display: inline;
}
#container ul>li:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">
<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">
<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">
<div id="container">
<ul>
<li data-id="item1">First item</li>
<li data-id="item2">Second item</li>
<li data-id="item3">Third item</li>
</ul>
</div>
I handle hover event by my own to add a triangle pointer and a horizontally aligned submenu bar. It's working fine for showing and navigating to the submenu when the top menu is clicked. The problem is during hover, the submenu bar will disappear when trying to move mouse to the submenu.
TIA
screenshot
Code:
$("#menubar li.dropdown>a.nav-link").hover(function() {
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").addClass("active show");
},
function() {
/*when top menu is clicked, don't hide submenu*/
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").removeClass("active show");
});
$("#menubar li>a.nav-link").on("click", function(e) {
e.stopPropagation();
var $li = $(this).closest("li");
if (!$li.hasClass("dropdown")) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
} else {
if ($li.data("show")) {
$li.removeClass("active show");
$li.data("show", false);
} else {
$("#menubar li.dropdown").removeClass("active show");
$li.addClass("active show");
$li.data("show", true);
}
}
});
$("#menubar ul.dropdown-menu>li>a").on("click", function(e) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
});
#menubar ul {
height: 44px;
padding-top: 5px;
}
#menubar .nav-link {
font-size: 14px;
padding: 8px 50px 0 0 !important;
color: white !important;
}
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited {
color: white !important;
}
#menubar .navbar {
padding-left: 0 !important;
}
.navbar.navbar-dark {
height: 44px;
margin: 0 15%;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu>li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu>li a {
font-weight: 600;
}
.dropdown-menu>li a:hover {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
<ul class="dropdown-menu" role="menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>
</nav>
You need to change hover event from link to list item, it is a common practice for your case:
$("#menubar li.dropdown").hover(function() {
...
});
Final Update The problem got solved. Thank you all. Prepros compile my js file into main-dist. the new code was in there instead of my main.js. Thank you for all who help me.
update Able to reproduce the nonworking code in jsBin
I'm wondering why the function is not working in my js file after my jquery file is called but the script work in my HTML file.
I want the function to be in my js file so it isn't in each one of my HTML file.
Example 1 in html on jsFiddle
Example 2 in html
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
Really Long snippet. The navbar code work in snippet as well but it doesn't work when i load in my browser
//time on front page
function displayTime () {
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();
setTimeout (displayTime, 1000);
};
displayTime();
/*
function menu(){
$('.tMenu').click(function(){
$('nav ul').slideToggle();
})
}
menu(); */
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
//slider main page
var main = function(){
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(){
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
$('.dot').click(function(){
var index = $(this).index(); // get the index or position of the current element that has the class .dot
$('.slide').fadeOut(500); // to hide all elements with class .slide
$('.dot').removeClass('active-dot');
$('.slide').removeClass('active-slide').addClass('active');
$('#slide' + (index+1)).fadeIn(500);
$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
$(this).addClass('active-dot');
});
};
$(document).ready(main);
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
nav {
background: #17181D;
border-bottom: 1px solid #0A0A0A;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
height: 40px;
width: 100%;
}
nav ul {
height: 40px;
width: 600px;
margin: 0 auto;
padding: 0;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #DED6D6;
display: inline-block;
line-height: 40px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0px #30365E;
width: 150px;
}
nav li a {
border-right: 1px solid #515676;
border-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #2575C6;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
nav a {
text-align: center;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #17181D;
width: 100%;
position: relative;
text-decoration: none;
}
nav a#pull:after {
border-top: .5em double white;
border-bottom: .145em solid white;
content: ' ';
display: inline-block;
height: 0.85em;
width: 1em;
position: absolute;
right: 15px;
top: 13px;
}
}
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div>
<h1 class='vb'></h1>
<div class='time'></div>
<div id='clock'></div>
<nav class='clearfix'>
<ul class='clearfix'>
<li>
Home
</li>
<li>
Bio
</li>
<li>
Hobbies
</li>
<li>
Resume
</li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</div>
</header>
<div class='slider container'>
<div class='slide active-slide slide-bg' id='slide1'>
<div class='container'>
<div class='row'>
<div class='slide-copy-1 col-xs-12'>
<h1>Surrounding</h1>
<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding. When was the last time you stop and enjoy a nice beatiful sunset?</p>
</div>
</div>
</div>
</div>
<div class='slide' id='slide2'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Get Moving And Motivated!</h1>
<p>In a world where digital devices is so prominent, we get lost in them. Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
</div>
<div class='slide-image col-md-8'>
<!--
<ul class='imageList'>
<li><a href='#'><img src="images/jog.jpg" /></a></li>
<li><a href='#'><img src="images/health.png" /></a></li>
<li><a href='#'><img src="images/motivated.jpg" /></a></li>
<li><a href='#'><img src='images/possible.jpg' /></a></li>
</ul> -->
</div>
</div>
</div>
</div>
<div class='slide' id='slide3'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Food Delight</h1>
<p>We have all been there before!! Food is the best type of comfort. Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
<!--<img src="images/sushi.jpg"/>-->
</div>
</div>
</div>
</div>
<div class='slide' id='slide4'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Videos</h1>
<p>Movies, TV shows and online video play such a huge role in our culture. Learning, Entertainment, Visual Satisfaction etc.</p>
<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
<div class='slider-nav'>
<ul class='slider-dot'>
<li class='dot dot1 active-dot'>•</li>
<li class='dot dot2'>•</li>
<li class='dot dot3'>•</li>
<li class='dot dot4'>•</li>
</ul>
</div>
Please see it's working here [1]: https://jsfiddle.net/e1aar5hz/11/
$(function() {
var pull = $('#pull');
var menu = $('nav ul');
menu.hide();
pull.show()
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
You code works just as it should. You target a link with id="pull" to toggle the menu on and off. The problem is, on your CSS, you hide that #pull link when you add this:
a#pull {
display: none;
}
So the button we need to click to toggle the menu is not there.
Just remove that CSS and you will see the "Menu" button and that the script is working fine.
If this is not the problem, please elaborate on what you are expecting to happen with the code you have here.
i recreated your code and is working just fine the only error i corrected was on displayTime function
function displayTime () {
var now = new Date();
var elt = $("#clock").text(now.toLocaleTimeString());
setTimeout (displayTime, 1000);
};
here is a demo http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview