如何将jquery添加到打开表[关闭]

【问题标题】：How to add jquery to open table [closed]如何将jquery添加到打开表[关闭]
【发布时间】：2022-01-20 00:14:43
【问题描述】：

我在设置 jquery 以点击打开表格时遇到问题，我还不是开发人员，请耐心等待。

这就是我所拥有的（HTML，CSS）

HTML

<ul class="pricing">
<li class="list-item"><a href="#">1</a></li> 
<li class="list-item"><a href="#">2</a></li>
<div>
<i class="fas fa-caret-down"></i>
</div>
<li class="list-item dnone"><a href="#">3</a></li>
<li class="list-item dnone"><a href="#">4</a></li>
</ul>

CSS

.dnone {
    display: none;
}

【问题讨论】：

欢迎来到 Stack Overflow！我们鼓励您尝试编写代码。如果您在尝试期间遇到特定技术问题，例如错误或意外结果，我们可以提供帮助。请提供有关该尝试的具体信息以及未按预期工作的内容。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。

标签： html jquery css

【解决方案1】：

你可以试试这个：

为图标元素添加开放类，为li项添加隐藏类。

HTML

<ul class="pricing">
    <li class="list-item"><a href="#">1</a></li>
    <li class="list-item"><a href="#">2</a></li>
    <div>
        <i class="fas fa-caret-down open"></i>
    </div>
    <li class="list-item hide dnone"><a href="#">3</a></li>
    <li class="list-item hide dnone"><a href="#">4</a></li>
</ul>

点击删除/添加/切换类。

JQUERY

$('.open').click(function() {

    $('.hide').toggle(' dnone');
    
});

您还可以为插入符号图标添加一点动画。

点击时，添加 CSS 类来旋转插入符号。

JQUERY

$('.open').click(function() {

    if($(this).hasClass('rotate-180')) {
        $(this).removeClass('rotate-180');
    } else {
        $(this).addClass(' rotate-180');
    }
    $('.hide').toggle(' dnone');
    
});

将此 CSS 声明添加到您的样式表中。

CSS

.rotate-180 {
    transform: rotate(180deg);
}

【讨论】：

谢谢，它有效。