Question

显示元素可以正常工作，但是在尝试隐藏相同的元素时没有任何反应。

显示元素后的HTML：

$(".container").click(function() {
  $('.top-menu').css('display', 'block');
});

$("div.container.change").click(function() {
  $('.top-menu').css('display', 'none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container change" onclick="myFunction(this)">
  <nav class="top-menu" style="display: block;">
    enter code here

真的看起来像地狱一样基本，但是我不明白为什么它不起作用。感谢您的审核。

Answer 1

只需将单击处理程序绑定到容器元素（请参见下文），然后删除内联onclick属性。您可以将.hide和.show用作.css('display', 'none')和.css('display', 'block')的简写。

如果需要切换显示，请在菜单元素上使用.toggle。

$(document).ready(function(){
  // ref container
  var container = $('.container'),
      // cache the menu selector
      menu = $('.top-menu');

  container.on('click', function(){
    menu.hide(); 
  });  
});

// you can use menu.toggle(); to show/hide on container click

.container {
  background: green;
  padding: 10px;
}

.top-menu {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <nav class="top-menu">
    Enter code here
  </nav>
</div>

Answer 2

删除您在HTML上调用的在线功能。

$(".container").click(function() {
  $('.top-menu').css('display', 'block');
});

$("div.container.change").on('click',function() {
  $('.top-menu').css('display', 'none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container change">
  <nav class="top-menu" style="display: block;">
    enter code here
  </nav>

</div>

在JQuery中不显示任何内容

2 个答案: