javascript - 使用 jQuery 查找下一个 div 并显示/隐藏它

Question

我正在开发一个列出产品/子产品的应用程序。当我单击 V 形时，我试图显示子产品。由于某种原因，我无法让它发挥作用。我已经能够让 V 形的翻转工作起来。

这是我的代码:

<div class="item">
    Product 1
    <div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>

    <div class="sub-item-list" style="display: none">            
        <div class="sub-item">
            Sub Product 1
        </div> 
    </div>
</div>

function expand(event) {
    if ($(event).hasClass("fa-chevron-down")){
        setTimeout(function () {///workaround
            $(event).removeClass("fa-chevron-down");                
        }, 10);
                      
        $(event).addClass("fa-chevron-up"); 
        $(event).closest('div').next().find("sub-item-list").css('display', 'inherit');

    } else {
        setTimeout(function () {///workaround
            $(event).removeClass("fa-chevron-up");                
        }, 10);

        $(event).addClass("fa-chevron-down");
        $(event).closest('div').next().find("sub-item-list").css('display', 'none');
    }
};

有人可以告诉我问题是什么吗？

Answer 1

您可以使用 .closest('div.item') 获取最接近的 div，然后使用 .find(".sub-item-list") 来获取找到你需要显示的div。

演示代码:

function expand(event) {
  if ($(event).hasClass("fa-chevron-down")) {
    setTimeout(function() { ///workaround
      $(event).removeClass("fa-chevron-down");
    }, 10);

    $(event).addClass("fa-chevron-up");
    //get closest div with class item -> find class
    $(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');

  } else {
    setTimeout(function() { ///workaround
      $(event).removeClass("fa-chevron-up");
    }, 10);

    $(event).addClass("fa-chevron-down");
     //get closest div with class item -> find class
    $(event).closest('div.item').find(".sub-item-list").css('display', 'none');
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  Product 1
  <div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>

  <div class="sub-item-list" style="display: none">
    <div class="sub-item">
      Sub Product 1
    </div>
  </div>
</div>