Jquery删除类问题答案

【问题标题】：Jquery remove class issueJquery删除类问题
【发布时间】：2015-09-03 00:44:22
【问题描述】：

我创建了一个全局 Jquery 来通过我的页面为各种元素添加和删除类切换功能。 JsFiddle

切换类显示覆盖原始 div 的隐藏 div。在覆盖层中，我创建了一个关闭按钮，试图移除隐藏的 div。

我在使用关闭按钮删除切换类时遇到了小问题。下面是我的代码

$('.details-btn').click(function(){
            var $panel = $(this).closest('.square').find('.i-panel');
            if ($panel.hasClass('inactive')) {
                $('.square .i-panel').addClass('inactive');
                $panel.removeClass('inactive');
                } else {
                    $panel.addClass('inactive');
                }
        });

HTML

<div class="item-container small-6 relative">

                    <div class="square">

                        <span class="exclusive-tag-3 cap-txt absolute">
                        <p class="absolute">New</p>
                        </span>

                        <img src="http://myjpg">



                        <div class="item-details">




                            <ul>
                                <li class="small-5">
                                    <p>ICON</p>
                                </li>

                                <!-- INFO BTN -->

                                <li class="small-5 details-btn">
                                    <i class="fa fa-info-circle">OPEN</i>
                                </li>

                                <!-- INFO BTN ENDS -->
                            </ul>

                        </div>



                        <div class="d-hidden i-panel inactive absolute">


                            <article class="global-padding">



                            </article>

                            <footer class="absolute">

                                <ul class="global-padding">

                                    <li class="small-5">
                                        <a>
                                            <p class="heading-5">Details</p>
                                        </a>
                                    </li>
                                    <li class="small-3">
                                        <a>
                                            <p class="heading-5">
                                                <i class="fa fa-envelope-o">SEND</i>
                                            </p>
                                        </a>
                                        </li>
                                    <li class="small-3">
                                        <a>
                                            <p class="heading-5">
                                                <i class="fa fa-times">close</i>
                                            </p>
                                        </a>
                                    </li>

                                </ul>

                            </footer>

                        </div>



                    </div> <!-- SQUARE ENDS HERE -->


                </div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->

【问题讨论】：

小问题是什么？
@thomas 关闭按钮不会删除隐藏的 div 类 :)

标签： javascript jquery

【解决方案1】：

您没有关闭按钮的单击处理程序，因此只有打开按钮会触发类切换，您需要将类 details-btn 也添加到关闭按钮或创建一个新的单击处理程序。

尝试替换

<p class="heading-5">
  <i class="fa fa-times">close</i>
</p>

与

<p class="heading-5 details-btn">
  <i class="fa fa-times">close</i>
</p>

【讨论】：

嗯？对不起，我不关注

【解决方案2】：

当您单击具有类 details-btn 的元素时会触发您的 Jquery 函数，因此您必须将类 details-btn 添加到关闭按钮，如下所示：

<i class="fa fa-times details-btn">close</i>

【讨论】：