Question

我有这样的菜单

<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

菜单被隐藏，当点击汉堡包图标时，它显示为叠加层。我想在单击任何一个链接时从导航栏中删除“打开”类。

我试过了 -

<script>    
    $('nav.overlay-menu ul li a').click(function() {
    $('#overlay').removeClass(".open"); });
</script>

但它不起作用。

我做错了什么？谢谢！

Answer 1

您不需要班级名称中的.。 removeClass知道它是一个类（或者至少认为它是一个类）。

$('nav.overlay-menu ul li a').click(function() { $('#overlay').removeClass("open"); });

＆＃13;

$('nav.overlay-menu ul li a').click(function() {
    $('#overlay').removeClass("open");
});

$('#burger').on('click', function() {
  $('#overlay').addClass('open');
  });

＆＃13;

.open { background: #ffa; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

<div id="burger">click</div>

＆＃13;

似乎在上面的代码段中工作正常。

Answer 2

您不必设置所有子项链来查找元素。你可以这样做：

    $('.overlay-menu a')

并使用此示例查找并关闭菜单

    $('.overlay-menu a').on('click', function(){
       $('#overlay').removeClass('open');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

JQuery - 删除类以使菜单覆盖淡出淡出

2 个答案: