Javascript 使用jquery隐藏不包含类的div

我想打开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>

$（'.submenu'）.hide（）；
函数细分（divId）{
$（'.+divId.show（）；
$（'.submenu不是（.+divId+））.hide（）；
}

我想用类作为传递的

id

显示

div

，并在

子菜单下隐藏所有
div
，该子菜单不包含传递的
id

但这并不是隐藏
div
并在不隐藏前一个除法的情况下一个接一个地显示所有除法。
您的伪类选择器中缺少
：
，尽管它们之间不需要空格。如果您添加了空间，它会检查没有该类的子体

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


代码甚至可以简化得多


$（'li[id^=id]'）//获取id以id开头的所有li元素
.mouseover（函数（）{//bind mouseover事件处理程序，而不是内联
$（'.submenu.'+this.id）//获取要显示的元素
.show（）//显示元素
.sides（'.submenu'）//获取其所有同级
.hide（）；//隐藏它们
})
。子菜单{
显示：无
}


第一行
第二行
第三行

第一师
第二师
第三师
伪类选择器中缺少
：
，尽管它们之间不需要空格。如果您添加了空间，它会检查没有该类的子体

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


代码甚至可以简化得多


$（'li[id^=id]'）//获取id以id开头的所有li元素
.mouseover（函数（）{//bind mouseover事件处理程序，而不是内联
$（'.submenu.'+this.id）//获取要显示的元素
.show（）//显示元素
.sides（'.submenu'）//获取其所有同级
.hide（）；//隐藏它们
})
。子菜单{
显示：无
}


第一行
第二行
第三行

第一师
第二师
第三师
首先，您应该使用不引人注目的JS来附加事件处理程序，而不是*

事件属性上过时的

。从那里，您可以使用一个简单的选择器按其类切换相关元素。试试这个：


$（'li'）。悬停（函数（）{
$（'..+this.id）.toggle（）；
});
。子菜单{
显示：无；
}


第一行
第二行
第三行

第一师
第二师
第三师
首先，您应该使用不引人注目的JS来附加事件处理程序，而不是*
事件属性上过时的
。从那里，您可以使用一个简单的选择器按其类切换相关元素。试试这个：


$（'li'）。悬停（函数（）{
$（'..+this.id）.toggle（）；
});
。子菜单{
显示：无；
}


第一行
第二行
第三行

第一师
第二师
第三师
您可以使用
addClass
和
removeClass
来显示悬停
li时关注的
div

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

您可以使用
addClass
和
removeClass
来显示悬停
li时关注的
div

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

使用
：not（）
代替
not（）
使用
：not（）
代替
not（）