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> 

私はidを渡されたクラスでdivを示し、合格idが含まれていないすべてのdiv.submenu下のdivを非表示にします。

しかし、これは隠されていませんdivと前のものを隠すことなく、すべての部門を次々に示しています。

Answer 1

あなたは `li

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

JSFIDDLE

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

まず、あなたのイベントハンドラの代わりに、古くなったon*イベント属性を付けるために控えめなJSを使用する必要がありますすることができます。そこから、単純なセレクタを使用して、関連する要素をそのクラスで切り替えることができます。これを試してみてください：

$('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>