在导航菜单中重置切换

时间:2014-04-07 13:35:24

标签: javascript jquery html css

点击正文或关闭按钮后,我试图将菜单按钮恢复到原始状态。

我的意思是当您单击菜单按钮时,您会看到它切换到x。单击x后,它将切换回菜单图标。一旦你点击按钮或关闭按钮外,我想模仿同样的事件。

$(".gn-icon-menu").click(function() {
 $(this).toggleClass("on");
});

http://jsfiddle.net/f4fjf/18/

3 个答案:

答案 0 :(得分:1)

您可以在document上添加点击事件,如下所示:

$(document).click(function() {
    if ($(".gn-icon-menu").hasClass('on')) {
        $(".gn-icon-menu").removeClass('on');
    }
});

您必须stopPropagation点击活动.gn-icon-menu

$(".gn-icon-menu").click(function(event) {
    event.stopPropagation();
    $(this).toggleClass("on");
});

Demo JSFiddle

答案 1 :(得分:1)

试试这个:

 $('body').click(function(evt){
    if(evt.target.class == ".gn-icon-menu")
       return;
    $(".gn-icon-menu").removeClass('on')
 });

 $(".gn-icon-menu").click(function(e) {
  e.stopPropagation()
  $(this).toggleClass("on");
 });

<强> Working Demo

答案 2 :(得分:1)

<强> DEMO

<强>的Javascript

$("body").not(".gn-icon-menu").click(function() {
   $(".gn-icon-menu").removeClass("on");
});

$(".gn-icon-menu").click(function(e) {
    e.stopPropagation();
  $(this).toggleClass("on");
});

希望有所帮助