Question

我有一个网站覆盖Div（＃site-overlay），我将其设置为display：none，并希望在我悬停并单击我的菜单按钮时将类更改为阻止。我可以使用vanilla Javascript和Jquery。

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

这是菜单中按钮的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;">

小提琴：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());

当您将鼠标悬停在按钮上时，第一个功能会显示网站覆盖，当您将鼠标从按钮上移开时，会消失

第二个功能有点自我解释。当您点击按钮时，网站覆盖图会消失或显示

Answer 2

使用.toggleClass()

描述：根据类的存在或state参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

$("#megamenu_button").togleClass(class, vaulue);

Answer 3

toggle（）应该可以修复你的问题

$("#megamenu_button").toggle()

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

3 个答案: