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

原文 标签 javascript html jquery

我正在开发一个列出产品/子产品的应用程序。当我单击 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');
    }
};
有人可以告诉我问题是什么吗?

最佳答案

您可以使用 .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>

关于javascript - 使用 jQuery 查找下一个 div 并显示/隐藏它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63627271/

相关文章:

javascript - 车库门效果:在内容上升之前将其隐藏

javascript - 如何仅获取jQuery页面的一部分?

javascript - 按 Id 对数组中的对象进行分组 - JavaScript

c# - Javascript 函数不会从代码隐藏中调用

html - 通过内联 CSS 加载外部字体

html - 如何在网页中插入音频并在html中隐藏控件

javascript - 背景大小不受输入字段的影响

php - codeigniter 集成 jquery 选择框操作

javascript - 将一个高度加到另一个

javascript - 将数组拆分为大块