jQuery else功能不起作用(jQuery else Function Not Working)

编程入门行业动态更新时间:2024-10-27 10:19:41

当mega菜单处于活动状态时，我正在尝试整页覆盖。 Curretly函数将.show类添加到overlay div，但它不会使用“else”函数删除。这是我有的：

HMTL：

CSS：

#twc-page-overlay { position: fixed; padding: 0; margin: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.58); z-index: 50; display: none; } .show { display: block !important; }

jQuery的：

jQuery(document).ready(function($) { $("div").click(function(){ if ( $('.mega-menu-item').hasClass('mega-toggle-on') ) { $('#twc-page-overlay').addClass('show'); } else { $('#twc-page-overlay').removeClass('show'); } }); });

任何帮助你非常感谢！谢谢！

I am trying to have an whole page overlay, when mega menu is active. Curretly the function adds .show class to the overlay div, but it does not remove using the "else" function. Here is what I have:

HMTL:

CSS:

#twc-page-overlay { position: fixed; padding: 0; margin: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.58); z-index: 50; display: none; } .show { display: block !important; }

jQuery:

Any help you be much appreciate! Thanks!

最满意答案

如果所有.show都切换显示元素，则不需要它。 .toggle（）将切换display 从无到block ：

$("#toggleOverlay").on('click', function(e){
  e.preventDefault();
  $('#twc-page-overlay').toggle();
}) 
  #twc-page-overlay {
    position: fixed;
    padding: 0;
    margin: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display:none;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<a href="#" class="btn btn-default" id="toggleOverlay" style="margin: 20px;">Toggle Overlay</a>

<div id="twc-page-overlay"></div> 
  
 
 
 澄清：没有“本机”jQuery方法将元素的显示绑定到类的存在与否。 但是，如果您在hover上显示您的超级菜单，您可以使用.hover（）方法，如下所示：  
 
 
  
  $("#toggleOverlay").hover(function(e){
  $('#twc-page-overlay').show();
}, function(e){
  $('#twc-page-overlay').hide();
}) 
  #twc-page-overlay {
    position: fixed;
    padding: 0;
    margin: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display:none;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<a href="#" class="btn btn-default" id="toggleOverlay" style="margin: 20px;">Toggle Overlay</a>

<div id="twc-page-overlay"></div> 
  
 
 
 好的，根据您的网站，这应该工作：  
jQuery(document).ready(function($) {
  $("li.mega-menu-item-has-children").hover(
    function(){
    $('#twc-page-overlay').show();
  }, function(){
    $('#twc-page-overlay').hide();
  })
});
If all .show does is toggle display of your element, you don't need it. .toggle() will toggle display from none to block: 
 
 
  
  $("#toggleOverlay").on('click', function(e){
  e.preventDefault();
  $('#twc-page-overlay').toggle();
}) 
  #twc-page-overlay {
    position: fixed;
    padding: 0;
    margin: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display:none;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<a href="#" class="btn btn-default" id="toggleOverlay" style="margin: 20px;">Toggle Overlay</a>

<div id="twc-page-overlay"></div> 
  
 
 
Clarification: There is no "native" jQuery way of binding the display of an element to the presence of a class or not. However, if you display your mega menu on a hover you can use .hover() method, like this: 
 
 
  
  $("#toggleOverlay").hover(function(e){
  $('#twc-page-overlay').show();
}, function(e){
  $('#twc-page-overlay').hide();
}) 
  #twc-page-overlay {
    position: fixed;
    padding: 0;
    margin: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display:none;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<a href="#" class="btn btn-default" id="toggleOverlay" style="margin: 20px;">Toggle Overlay</a>

<div id="twc-page-overlay"></div> 
  
 
 
Ok, based on your website, this should work: 
jQuery(document).ready(function($) {
  $("li.mega-menu-item-has-children").hover(
    function(){
    $('#twc-page-overlay').show();
  }, function(){
    $('#twc-page-overlay').hide();
  })
});