JQUERY

Question

我通过添加关闭图标来关闭菜单来响应滑出导航栏。

鼠标悬停在菜单上滑出然后缩回：

$(window).load(function(){
  $("#brgr").hover(
    function () {
      $("#menu-full-size").addClass("is-open");
    },
    function(){
      $("#menu-full-size").hover(
        function(){
          $("#menu-full-size").addClass("is-open");  
        },
        function(){
          $("#menu-full-size").removeClass("is-open");  
        }
      );
    }
  );
});

使用jQuery，上面的语法有点让我感到有点......

我添加了一个用于查找悬停的函数，然后是另一个悬停监听器以保持幻灯片菜单可见...但是如何添加另一个用于监听关闭图标上的单击，{{1 }} removeClass？

.is-open

Answer 1

您可以使用以下点击事件： -

$('.close-nav-x').click(function(){ 
   $("#menu-full-size").removeClass('is-open');
});

如下所示更改您的代码： -

$(window).load(function(){
    $("#brgr").hover(function() {
        $("#menu-full-size").addClass("is-open");
    }, function() {
        $("#menu-full-size").removeClass("is-open");
    });

    $("#menu-full-size").hover(function() {
        $("#menu-full-size").addClass("is-open");
    }, function() {
        $("#menu-full-size").removeClass("is-open");
    });
    $('.close-nav-x').click(function(){ 
       $("#menu-full-size").removeClass('is-open');
    });
});

尝试过这个并让我知道是否有效： -

$(window).load(function(){

    $("#brgr, #menu-full-size").hover(function() {
        $("#menu-full-size").addClass("is-open");
    }, function() {
        $("#menu-full-size").removeClass("is-open");
    });

    $('.close-nav-x').click(function(){ 
       $("#menu-full-size").removeClass('is-open');
    });
});

Answer 2

好吧，如果我能顺利完成这项工作

JQUERY

$(window).load(function(){
  $("#brgr, #menu-full-size").on('mouseover', function() {
      $("#menu-full-size").addClass("is-open");  

      $('.close-nav-x').on('click', function() {
        $("#menu-full-size").removeClass("is-open"); 
      });   
  });
});

但是我怀疑click事件不会在svg上触发，因为你想使用.close-nav-x类元素来触发click事件，更好的是你应该用一个按钮替换它并使用它来设置样式的CSS。

HTML

<div id="menu-full-size">
  <div class="close-nav">
    <button class="close-nav-x">X</button>
  </div>
  <h2>Rest of menu stuff</h2>
</div>

如何添加其他功能来收听点击？

2 个答案:

JQUERY

HTML