cluckedされていますが、可能な親や子供がいないliを選択する方法は？

Question

ネストされたメニューでは、クリックされたがその可能な親または子ではない非常にliのjqueryセレクタを持つことは可能ですか？

$(document).ready(function() { 
 
    $('.toc > ol > li:first-child').addClass('selected'); 
 
    $('.toc > ol > li').on('click', function() { 
 
    console.log('ee'); 
 
    //$('.toc').find('li').removeClass("selected"); 
 
    $(this).siblings().removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    }); 
 
});

.toc .selected a { 
 
    border-left: 4px solid #22BBEA; 
 
    color: #22BBEA; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='toc'> 
 

 
    <ol class="circle"> 
 

 
    <li class=""> 
 
     <a href="#description-de-l-outil">1- Description de l'outil</a> 
 
    </li> 
 
    <li class="selected"> 
 
     <a href="#les-prealables-a-son-utilisation">2- Les préalables à son utilisation</a> 
 

 
     <ol class="circle"> 
 

 
     <li> 
 
      <a href="#1-plateforme-amu-hal">2-1 Plateforme AMU HAL</a> 
 
     </li> 
 
     <li> 
 
      <a href="#2-site-drupal">2-2 Site drupal</a> 
 
     </li> 
 

 
     </ol> 
 

 
    </li> 
 
    <li class=""> 
 
     <a href="#les-fonctionnalites-disponibles">3- Les fonctionnalités disponibles&nbsp;</a> 
 
    </li> 
 
    <li> 
 
     <a href="#notice-a-l-usage-des-gestionnaires-de-site">4- Notice à l'usage des gestionnaires de site</a> 
 
    </li> 
 
    </ol> 
 

 

 
</div>

Answer 1

これを解決するには、あなたは、まずHTML内のすべてのliの要素だけではなく、トップレベルol > liにハンドラをアタッチする必要があります。次に、イベントでstopPropagation()に電話して、DOMをバブリングして親のli要素に影響を与えないようにすることができます。最後に、同じレベルにない可能性があるので、siblings()だけでなく、すべての要素からselectedクラスを削除する必要があります。

子供を除外するには、.toc li.selected li aセレクタを使用してCSSを修正してスタイルをリセットする必要があります。

$(function() { 
 
    $('.toc > ol > li:first-child').addClass('selected'); 
 
    
 
    $('.toc li').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    $('.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    }); 
 
});

.toc a, 
 
.toc li.selected li a { 
 
    border: 0; 
 
    color: inherit; 
 
} 
 

 
.toc .selected a { 
 
    border-left: 4px solid #22BBEA; 
 
    color: #22BBEA; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='toc'> 
 
    <ol class="circle"> 
 
    <li class=""> 
 
     <a href="#description-de-l-outil">1- Description de l'outil</a> 
 
    </li> 
 
    <li> 
 
     <a href="#les-prealables-a-son-utilisation">2- Les préalables à son utilisation</a> 
 
     <ol class="circle"> 
 
     <li> 
 
      <a href="#1-plateforme-amu-hal">2-1 Plateforme AMU HAL</a> 
 
     </li> 
 
     <li> 
 
      <a href="#2-site-drupal">2-2 Site drupal</a> 
 
     </li> 
 
     </ol> 
 
    </li> 
 
    <li class=""> 
 
     <a href="#les-fonctionnalites-disponibles">3- Les fonctionnalités disponibles&nbsp;</a> 
 
    </li> 
 
    <li> 
 
     <a href="#notice-a-l-usage-des-gestionnaires-de-site">4- Notice à l'usage des gestionnaires de site</a> 
 
    </li> 
 
    </ol> 
 
</div>

：それと

はこれを試して、言いました