Question

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

toggle类显示一个隐藏的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

当您单击其上包含class details-btn的元素时，将触发您的Jquery函数，因此您必须将类详细信息-btn添加到关闭按钮，如下所示：

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

Jquery删除类问题

2 个答案: