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的类，并隐藏div div下不包含传递.submenu的所有id。

但是这并没有隐藏div并且在不隐藏前一个分区的情况下显示所有分区。

Answer 1

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

＆＃13;

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

＆＃13;

.submenu {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

您的伪类选择器中缺少:，尽管它们之间不需要空格。如果你添加了空格，它会检查没有该类的后代。

$('.submenu:not(.' + divId + ')').hide();
// --------^---------

<小时/> 代码可以更加简化

$('li[id^=id]') //  get all li element where id start with id
.mouseover(function() { // bind mouseover event handler instead of inline
  $('.submenu.' + this.id) // get the element to show
  .show() // show the element
  .siblings('.submenu') // get all its siblings
  .hide(); // hide them
})

.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>

Answer 3

您可以使用addClass＆amp; removeClass显示关注div

时所关注的li

function subDivision(divId) {
         $('.submenu').removeClass('showElem').addClass('hideElem');
          $('.'+divId).addClass('showElem');
    }

JSFIDDLE

使用jquery

3 个答案: