主页 / 问题 / 984009
Accepted
Gleb Pristupa
Asked:2020-05-22 00:09:27 +0800 CST2020-05-22 00:09:27 +0800 CST

点击打开子菜单

  • 772

打开所有 ul.catalog__submenu。如何在不创建新类的情况下避免这种情况。我寻求有关逐步打开子菜单的帮助

$(".catalog__open").on("click", function() {
  $(".catalog__submenu").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="catalog__open">1</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#">2</a>
        <ul class="catalog__submenu" style="display:none">
          <li><a href="#">2.1</a></li>
          <li><a href="#">2.2</a></li>
          <li><a href="#">2.3</a></li>
        </ul>
      </li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
    </ul>
  </li>
  <li><a href="#" class="catalog__open">7</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
  </li>
</ul>

javascript

1 个回答

  1. Best Answer

    如果对您的代码进行最小的更改，它将是这样的：

    $(".catalog__open").on("click", function() {
  /* Определяем номер кликнутого меню */
  var x = $(this).index('.catalog__open');
  /* По тому же номеру открываем суб-меню */
  $( ".catalog__submenu:eq(" + x + ")" ).toggle();

  console.log(x);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li><a href="#" class="catalog__open">1</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#" class="catalog__open">2</a><!--сюда добавил еще класc__open-->
        <ul class="catalog__submenu" style="display:none">
          <li><a href="#">2.1</a></li>
          <li><a href="#">2.2</a></li>
          <li><a href="#">2.3</a></li>
        </ul>
      </li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
    </ul>
  </li>
  <li><a href="#" class="catalog__open">7</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
  </li>
</ul>

    如果在单击新项目时需要关闭前一个项目，这种情况在此处描述（第 2 项）→ JavaScript 可切换选项卡 - 选项卡（和一些 CSS）

    • 1

相关问题