'jQuery first click not working, only subsequent clicks work
When the viewport is 768px or less, we want the a.mega-drop-down links to open on click, rather than on hover as it is for desktop.
The problem is the first click doesn't do anything.
Only subsequent clicks do something.
How do we make the first click on a.mega-drop-down function in the mobile viewport the same way subsequent clicks do?
You will need to adjust the code preview viewport down to 768px or below to avoid the desktop hover effect taking place.
Help appreciated.
$(document).ready(function () {
/*$(".mega-drop-down").hover(function() {
if(window.innerWidth >= 769) {
$(this).find('a span').toggleClass('hover');
$('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
}
});*/
$(".mega-drop-down").click(function() {
if(window.innerWidth <= 768) {
$('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
$(this).find('a span').toggleClass('hover');
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
}
});
$('.toggle-menu').click(function(){
$('.exo-menu').toggleClass('display');
});
}); ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza, ul.manos, ul.corporal {
list-style-type: none;
padding: 0;
}
/*.container-fluid.megamenusip {
width: 1200px;
}*/
.content {
margin: 50px 100px 0px 100px;
}
.row {
margin-right: 0;
margin-left: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu > li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu > li > a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu > li > a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down, .flyout-right, .flyout-left {
position: relative;
}
li.drop-down:before {
content: "\f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down > ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right > ul, .flyout-left > ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down > ul > li > a, .flyout-right ul > li > a, .flyout-left ul > li > a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #365670;
border-bottom: 1px dotted #547787;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul > li > a, .flyout-left ul > li > a {
border-bottom: 1px dotted #B8C7BC;
}
/*Flyout Mega*/
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 14px;
padding-bottom: 13px;
}
.flyout-mega ul > li > a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul > li > a:hover, .flyout-mega ul > li > a:active, .flyout-mega ul > li > a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
/*mega menu*/
.mega-menu {
left: 0;
right: 0;
padding: 15px;
width: 100vw;
display: none;
position: fixed;
padding-top: 0;
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 14px;
padding-bottom: 13px;
padding-top: 15px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul > li > a, .flyout-left ul > li > a, .flyout-mega-wrap, .mega-menu {
background-color: white;
}
/*hover*/
.Blog:hover, .Images:hover, .mega-menu:hover, .drop-down-ul:hover, li.flyout-left > ul:hover, li.flyout-right > ul:hover, .flyout-mega-wrap:hover, li.flyout-left a:hover + ul, li.flyout-right a:hover + ul, .blog-drop-down > a:hover + .Blog, li.drop-down > a:hover + .drop-down-ul, .images-drop-down > a:hover + .Images, .mega-drop-down a:hover + .mega-menu, li.flyout-mega > a:hover + .flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -15px;
}
.logosip {
padding: 0 !important;
margin-top: -7px !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 200px !important;
height: 25px !important;
max-width: 210px !important;
max-height: 30px !important;
border: 1.5px transparent !important;
border-radius: 1.2em;
background-color: transparent !important;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
z-index: 2000;
}
/* opacidad */
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}
/* Fin */
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down > a > span::after {
font-family: FontAwesome;
content: '\f107';
padding-left: 5px;
}
.mega-drop-down > a > span.hover::after {
content: '\f106';
}
.mega-drop-down > a > span.hover, .mega-drop-down > a:active {color: #23ADF8;}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {padding: 10px;}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 10px;
padding: 13px;
border-radius: 24px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {color: #23ADF8;}
.mm-mm-video:hover a {color: white;}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
@media (min-width: 1300px) {
.mega-menu-wrap {
width: 1300px;
margin: auto;
}
}
@media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
@media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
@media (min-width: 992px) {
.exo-menu > li:nth-child(1) > a {padding-left: 0;}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
@media (max-width: 991px) {
.container-fluid {padding-left: 0; padding-right: 0;}
.mm-grid {width: 400px; max-width: 100%;}
h4.row.mega-title {padding-left: 0;}
.empty {display: none;}
}
@media (min-width:768px) {
.exo-menu > li > a {
display: block;
padding: 35px 22px;
}
.mega-menu, .flyout-mega-wrap, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: fixed;
margin-top: 0;
}
.flyout-right > ul {
left: 100%;
}
.flyout-left > ul {
right: 100%;
}
}
@media (max-width:768px) {
.exo-menu {
min-height: 58px;
width: 100%;
}
ul.exo-menu.display {
width: 100vw;
left: 0;
position: absolute;
margin-top: 40px;
background-color: white;
}
.exo-menu.display a.toggle-menu {
margin-top: -69px;
}
.exo-menu > li > a {
width: 100%;
display: none;
}
.exo-menu > li {
width: 100%;
}
.display.exo-menu > li > a {
display: block;
padding: 20px 30px;
font-size: 24px;
}
.mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><span>Product</span></a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a>
<span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a>
<span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a>
<span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a>
<span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li><a href="#">Hardware</a></li>
<li><a href="#">Player Software</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;"/></div>
<div><span style="display: inline-block; width: 100%;"></span> Get an overview of how easy it is to get digital signage<br />
<button class="mm-mm-video"><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Solutions</span></a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a>
<span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail</a>
<span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty</a>
<span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a>
<span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness</a>
<span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More</a>
<span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li><a href="#">Digital Menu Boards</a></li>
<li><a href="#">Window Signage</a></li>
<li><a href="#">In-Store Signage</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Partner Program</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Resources</span></a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a>
<span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies</a>
<span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a>
<span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;"/></div>
<div><span style="display: inline-block; width: 100%;"></span> Just 4 steps to get digital signage for your business<br />
<button class="mm-mm-video"><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#"></i>Pricing</a></li>
<a href="#" class="toggle-menu visible-xs-block">|||</a>
</ul>
</div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|