javascript - 使用jquery隐藏不包含类的div

Question

我想在悬停在 li 元素上时切换 div。

我的 li 元素看起来像

<ul>
  <li id="id1" onmouseover="subDivision(this.id)">first line</li>
  <li id="id2" onmouseover="subDivision(this.id)">second line</li>
  <li id="id3" onmouseover="subDivision(this.id)">third line</li>
</ul>

<div class="submenu id1">
   First division
</div>
<div class="submenu id2">
   Second division
</div>
<div class="submenu id3">
   third division
</div>

jQuery 代码:

<script>
  $('.submenu').hide();
  function subDivision(divId) {
    $('.'+divId).show();
    $('.submenu not(.'+divId+')').hide();
  }
</script>

我想显示 div 类作为传递 id 并隐藏 .submenu div 下的所有 div不包含传递的 id。

但是这不是隐藏 div 并显示所有分区后又不隐藏前一个。

Answer 1

首先，您应该使用不显眼的 JS 来附加您的事件处理程序，而不是过时的 on* 事件属性。从那里您可以使用一个简单的选择器按其类切换相关元素。试试这个:

$('li').hover(function() {
  $('.' + this.id).toggle();
});

.submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="id1">first line</li>
  <li id="id2">second line</li>
  <li id="id3">third line</li>
</ul>

<div class="submenu id1">
  First division
</div>
<div class="submenu id2">
  Second division
</div>
<div class="submenu id3">
  third division
</div>