javascript - 单击/切换另一个 div 时更改 div 上的类

Question

我有一个站点覆盖 Div (#site-overlay)，已将其设置为 display:none，并且希望将鼠标悬停并单击菜单按钮时阻止的类更改为阻止。我可以使用普通的 Javascript 和 Jquery 来实现此目的。

我的菜单是基于 Javascript 的，所以不确定它是否足以切换菜单按钮 div？

这是菜单中按钮的 html:

<ul class="megamenu">
    <li class="megamenu_button" style="display: none;">
        <a href="#_">Mega Menu</a>
    </li>
    <li style="">
        <a href="#_" class="megamenu_drop">Computers</a>
        <div class="dropdown_fullwidth" style="left: -1px; top: auto; display: block;">

fiddle :http://jsfiddle.net/Jerryskate/doxdmxmL/

Answer 1

您可以使用 show() 和 hide()

包含事件的完整代码

$('#megamenu_button').mouseover(function(){
  $('#site-overlay').show();
  })
  .mouseout(function(){
     $('#site-overlay').hide();
  });
});
/*and*/
$('#megamenu_button').click($('#site-overlay').toggle());

第一个功能是，当您将鼠标悬停在按钮上时，站点覆盖层会出现，当您将鼠标从按钮上移开时，站点覆盖层会消失

第二个功能有点不言自明。当您单击按钮时，网站覆盖层消失或出现