如何選擇已經被鎖住但不可能是父母或孩子的李？

是否有可能在嵌套菜單中有一個jQuery選擇器，用於已被點擊的非常li但不包括其可能的父母或子女？如何選擇已經被鎖住但不可能是父母或孩子的李？

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

來源

2017-10-20 Matoeil

爲了解決這個問題，你首先需要處理程序安裝到所有在HTML中li元素，不只是頂級ol > li。然後，您可以在事件上調用stopPropagation()來阻止它冒泡DOM並影響父項li元素。最後，您需要從每個元素中刪除selected類，而不僅僅是siblings()，因爲它們可能不再處於相同級別。

要排除孩子，您需要修改CSS以重置其上的樣式，使用.toc li.selected li a選擇器。

隨着中說，試試這個：

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

來源

2017-10-20 16:23:24

如何選擇已經被鎖住但不可能是父母或孩子的李？

回答

相關問題