为啥我的带有“$(this).next”的 JavaScript/jQuery 脚本不起作用？

Posted 2023-02-25

【中文标题】为啥我的带有“$(this).next”的 JavaScript/jQuery 脚本不起作用？

【英文标题】：Why my JavaScript/jQuery script with "$(this).next" does not work?为什么我的带有“$(this).next”的 JavaScript/jQuery 脚本不起作用？

【发布时间】：2021-02-22 07:43:36

【问题描述】：

在“nopCommerce”中，我想更改侧面类别导航。

现在，当有人点击一个类别时，它的外壳会被展开……但它不起作用。

html 看起来像这样：

(...)

$(document).ready(function() 
  $('.dropdown').on('click', function() 
    var $this = $(this)
    $this.next('a.dropdown-toggle').attr('aria-expanded', 'true');
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=master-column-wrapper>
  <div class=container>
    <div class=row>
      <div class="sidebar col-md-3">
        <div class="block block-category-navigation well box-shadow-wrapper">
          <div class="wjktitle main-title"><strong>Kategorien</strong></div>
          <div class="wjklistbox MainMenu">
            <ul class="nav nav-list">
              <li><a href=/de/gift-cards-2> Gift Cards <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                <li class=dropdown>
                  <span class="fa fa-angle-down visible-xs"></span>
                  <a class=dropdown-toggle href=/de/pickup role=button aria-expanded=false> Pickup (2) </a>
                  <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                    <li><a href=/de/opel> Opel <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                      <li><a href=/de/toyota> Toyota <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                        <li><a href=/de/ford> Ford <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                          <li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/vw role=button aria-expanded=false> VW (2) </a>
                            <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                              <li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/bully role=button aria-expanded=false> Bully (2) </a>
                                <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                                  <li><a href=/de/2010-> 2010- <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                                    <li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015- role=button aria-expanded=false> 2015- (2) </a>
                                      <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                                        <li><a href=/de/lampen> Lampen <span class="head-number op-number"> (2) </span> <span>&nbsp;</span> </a>
                                          <li><a href=/de/kotflugel> Kotfl&#xFC;gel <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                                      </ul>
                                </ul>
                                <li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/golf role=button aria-expanded=false> Golf (0) </a>
                                  <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                                    <li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015--2 role=button aria-expanded=false> 2015- (0) </a>
                                      <ul class="dropdown-menu sub-menusublist first-level" role=menu>
                                        <li><a href=/de/lampen-2> Lampen <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a>
                                          <li><a href=/de/kotflugel-2> Kotfl&#xFC;gel <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a></ul>
                                      <li><a href=/de/2010--2> 2010- <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a></ul>
                            </ul>
                  </ul>
                  <li><a href=/de/svu> SVU <span class="head-number op-number"> (0) </span> <span>&nbsp;</span> </a></ul>
          </div>
        </div>

【问题讨论】：

我“修复”了你的脚本，但它缺少 </li> 和一些 CSS

HTML 标记看起来无效 - 为什么您打开大量 li 而不关闭它们？

@NicoHaase 没关系，但不推荐 - 尤其是在其中一些包装 UL 的地方

谢谢，但只是一个狙击手。发布所有内容太长了...

【参考方案1】：

a.dropdown-toggle 是 .dropdown 的子代，因此您可以调用 find 方法而不是 next：

$(document).ready(function() 
  $('.dropdown').on('click', function() 
    var $this = $(this)
    $this.find('a.dropdown-toggle').attr('aria-expanded', 'true');
  );
);

【讨论】：

您可能需要使选择器更具体一些以避免孙子.find(' > a.dropdown-toggle')