javascript - 单击子链接jquery时如何防止所有 parent 切换？

Question

所以我有这样的东西:

还有一些超简单的 jQuery，当我单击父链接(“规范表”、“说明”等)时会切换子链接，尽管当我单击其中一个时，它们都会打开。这是代码(有没有一种简单的方法可以每次点击只打开一个父级)？:

$(document).ready(function(){
    $("ul#dropdown-download-links li > a").unbind().click(function(e) {
        var ulContainer = $(this).closest("ul");
        e.preventDefault();
        $(ulContainer).slideToggle();
    });
});

Answer 1

$(this).closest("ul"); 以错误的元素为目标，这以第一个父 ul 遇到从被点击的 DOM 树上升为目标一个标签

在下面的 $(this).closest("li").find("ul"); 中将定位遇到的第一个父 li 标签从点击的a标签中找到ul标签li标签

$(document).ready(function() {
  $("ul#dropdown-download-links li > a").unbind().click(function(e) {
    var ulContainer = $(this).closest("li").find("ul");
    e.preventDefault();
    $(ulContainer).slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sticky-sidebar">
  <ul class="dropdown-menu">
    <li>
      <a href="http://wacdev.waclighting.com/locator/" target="_blank" class="btn-black">Where to Buy</a>
    </li>

    <li>
      <ul id="dropdown-download-links" data-sticky="sticky-aside" class="fast-links dropdown">
        <div data-domain="http://wacdev.waclighting.com" style="display:none;"></div>
        <div data-zspectempid="" style="display:none;">0</div>
        <div data-ppid="" style="display:none;">333</div>
        <div data-spec-sheet-url="" style="display:none;">/storage/SPECSHEET_PDF/R3CRDT_SPSHT.pdf</div>


        <li><a href="http://192.168.12.44:8090/SPECSHEET_PDF/R3CRDT_SPSHT.pdf" target="_blank">SPEC SHEET</a>

          <ul id="spec-sheet-option" style="display: none;">
            <li><a href="http://192.168.12.44:8090/SPECSHEET_PDF/R3CRDT_SPSHT.pdf"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Oculux Architecture</a></li>
            <li><a href="#">Dim-to-Warm!</a></li>
          </ul>
        </li>

        <li><a href="http://192.168.12.44:8090/INST_SHEET/R3CRN-trim_0.pdf" target="_blank">INSTRUCTIONS</a>

          <ul id="spec-sheet-option" style="display: none;">
            <li><a href="http://192.168.12.44:8090/INST_SHEET/R3CRN-trim_0.pdf">Oculux Architecture</a></li>
            <li><a href="#">Dim-to-Warm!</a></li>
          </ul>
        </li>

        <li><a href="http://192.168.12.44:8090/IES_FILES/Oculux Architectural_IES.zip" target="_blank">IES FILES</a>

          <ul style="display: none;">
            <li><a href="http://192.168.12.44:8090/INST_SHEET/R3CRN-trim_0.pdf">Some value</a></li>
            <li><a href="#">Some other value</a></li>
          </ul>
        </li>


        <li><a href="http://192.168.12.44:8090/DIM_REPORT/E1806008 (R3C).pdf" target="_blank">DIMMING REPORT</a>

          <ul style="display: none;">
            <li><a href="http://192.168.12.44:8090/INST_SHEET/R3CRN-trim_0.pdf">Some value</a></li>
            <li><a href="#">Some other value</a></li>
          </ul>
        </li>
      </ul>
    </li>

  </ul>
</div>