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

我正在开发一个列出产品/子产品的应用程序。当我点击雪佛龙时，我试图显示子产品。由于某种原因，我不能让它工作。我已经能够让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');
    }
};

产品1
子产品1
函数扩展（事件）{
if（$（事件）.hasClass（“fa V形向下”））{
setTimeout（函数（）{///解决方法
$（事件）。移除类（“fa V形向下”）；
}, 10);
$（事件）.addClass（“fa V形上升”）；
$（event）.closest（'div'）.next（）.find（“子项列表”）.css（'display'，'inherit'）；
}否则{
setTimeout（函数（）{///解决方法
$（事件）.removeClass（“fa V形上升”）；
}, 10);
$（事件）.addClass（“fa V形向下”）；
$（event）.closest（'div'）.next（）.find（“子项列表”）.css（'display'，'none'）；
}
};

有人能告诉我问题出在哪里吗？

您可以使用

.nestest（'div.item'）

获取最近的div，然后使用

.find（.sub-item list”）

查找需要显示的div

演示代码：

函数展开（事件）{
if（$（事件）.hasClass（“fa V形向下”））{
setTimeout（函数（）{///解决方法
$（事件）。移除类（“fa V形向下”）；
}, 10);
$（事件）.addClass（“fa V形上升”）；
//使用类项目->查找类获取最近的div
$（event）.closest（'div.item'）.find（'sub.item list'）.css（'display'，'inherit'）；
}否则{
setTimeout（函数（）{///解决方法
$（事件）.removeClass（“fa V形上升”）；
}, 10);
$（事件）.addClass（“fa V形向下”）；
//使用类项目->查找类获取最近的div
$（event）.closest（'div.item'）.find（'sub.item list'）.css（'display'，'none'）；
}
};

产品1
>> 
子产品1
当您在
标记上设置
onclick
事件时，您还可以调用
parent（）.next（）
方法，而不是
closest（）
，以获取子项/产品

试试这个例子：


函数展开（事件）
{
if（$（事件）.hasClass（“fa V形向下”））
{
setTimeout（函数（）
{///解决方法
$（事件）。移除类（“fa V形向下”）；
}, 10);
$（事件）.addClass（“fa V形上升”）；
$（event.parent（）.next（）.css（“显示”、“块”）；
} 
其他的
{
setTimeout（函数（）
{///解决方法
$（事件）.removeClass（“fa V形上升”）；
}, 10);
$（事件）.addClass（“fa V形向下”）；
$（event.parent（）.next（）.css（'display'，'none'）；
}
};

产品1
切换V形
子产品1
非常感谢！我以为我很接近。@BrettDavis欢迎你。：）如果这个答案有效，你可以接受。