Question

在嵌套菜单中是否可以为点击的li而不是可能的父母或孩子设置jquery选择器？

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

要解决此问题，首先需要将处理程序附加到HTML中的所有li元素，而不仅仅是顶级ol > li。然后，您可以在事件上调用stopPropagation()来阻止它冒泡DOM并影响父li元素。最后，您需要从每个元素中删除selected类，而不仅仅是siblings()，因为它们可能不再处于同一级别。

要排除子项，您需要使用.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>

如何选择已被破解而不是可能的父母或子女的李？

1 个答案: