Jquery删除类问题

Question

我创建了一个全局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 -->

Answer 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>

Answer 2

当单击具有类详细信息(Btn)的元素时，会触发Jquery函数，因此必须将类详细信息-btn添加到关闭按钮中，如下所示：

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