jQuery - 单击并切换所有其他（不是直接父级）的切换元素

Question

我正在尝试使用我在StackOverflow上找到here的代码段构建自定义菜单。我知道parent（）方法只会引用直接父级，所以我用不同的方法（比如parents（），nearest（）等）玩很少来实现相同的结果（显示一个，隐藏所有其他），只有div是更遥远的。问题是，切换总是显示或隐藏所有元素或根本不执行任何操作。我不熟悉jQuery（只是一个基础知识），所以如果问题有点明显，我很抱歉。

感谢您的帮助。

我的一次尝试：

$('.div-hide p').hide();

$('.item a').click(function(e) {

  e.preventDefault();
  // hide all span
  var hideAll = $(this).parents().find('p');
  $(".div-hide p").not(hideAll).hide();

  // here is what I want to do
  hideAll.toggle();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="high-parent">
  <div class="item">
    <a href="">button1</a><br>
  </div>

  <div class="item">
    <a href="">button2</a><br>
  </div>

  <div class="item">
    <a href="">button3</a><br>
  </div>

  <div class="item">
    <a href="">button4</a><br>
  </div>

  <div class="div-hide">
    <p>First part</p>
  </div>
  <div class="div-hide">
    <p>Second part</p>
  </div>
  <div class="div-hide">
    <p>Third part</p>
  </div>
  <div class="div-hide">
    <p>Fourth part</p>
  </div>
</div>

Answer 1

您可以使用单击的锚元素parent的索引来定位p标记元素并显示隐藏它：

＆＃13;

＆＃13;

$('.div-hide p').hide();

$('.item a').click(function(e) {

  e.preventDefault();
  // hide all span
  var hideAll = $('.div-hide').eq($(this).closest('.item').index()).find('p');
  $(".div-hide p").not(hideAll).hide();
  // here is what I want to do
  hideAll.toggle();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="high-parent">
  <div class="item">
    <a href="">button1</a><br>
  </div>

  <div class="item">
    <a href="">button2</a><br>
  </div>

  <div class="item">
    <a href="">button3</a><br>
  </div>

  <div class="item">
    <a href="">button4</a><br>
  </div>

  <div class="div-hide">
    <p>First part</p>
  </div>
  <div class="div-hide">
    <p>Second part</p>
  </div>
  <div class="div-hide">
    <p>Third part</p>
  </div>
  <div class="div-hide">
    <p>Fourth part</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议不要完全依赖事物的顺序。我会在要显示的项目中添加数据属性。

＆＃13;

＆＃13;

$('.div-hide p').hide();

$('.item a').click(function(e) {

  e.preventDefault();
  // hide all span
  $(".div-hide p").hide();

  // show clicked
  const id = e.target.id;
  $(".div-hide p[data-id='"+id+"']").show();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="high-parent">
  <div class="item">
    <a id="1" href="">button1</a><br>
  </div>

  <div class="item">
    <a id="2" href="">button2</a><br>
  </div>

  <div class="item">
    <a id="3" href="">button3</a><br>
  </div>

  <div class="item">
    <a id="4" href="">button4</a><br>
  </div>

  <div class="div-hide">
    <p data-id="4">Fourth part</p>
  </div>
  <div class="div-hide">
    <p data-id="2">Second part</p>
  </div>
  <div class="div-hide">
    <p data-id="3">Third part</p>
  </div>
  <div class="div-hide">
    <p data-id="1">First part</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;