Question

我设法创建了一个打开弹出窗口（.more-news）的jQuery命令。在这个页面中有几个链接打开不同的弹出窗口。此弹出窗口有一个关闭按钮，但如果用户点击另一个打开另一个弹出窗口的链接，它将相互叠加，如图所示。为了避免这种情况，我想要一个jQuery命令，如果你点击任何链接打开弹出窗口，它会先关闭任何其他打开的弹出窗口以避免这种叠加。

有什么建议吗？

发布链接以打开弹出窗口：

<article class="news-thumb">
                        <time>08/07/2013</time>
                        <div class="news-info">
                            <img src="images/news/post-2.jpg" alt="#">
                            <h1>Main title</h1>
                            <p>lorem ipsum su madre. Lorem ipsum su madre. Lorem ipsum... </p>
                            <a href="#" class="more-btn-2">Read more <i class="sprites-more-news"></i></a>
                        </div>
                    </article>

弹出代码：

<article class="more-block-1">
                        <div class="more-news">
                            <h1>Main title</h1>
                            <a href="#" class="pop-link">
                                <i class="sprites-pop-news-close"></i>
                            </a>
                            <div class="more-text">
                                <p>
                                    Donec a ligula eget dolor ornare adipiscing. Ut varius pulvinar nisi eget feugiat. Sed dictum ante nec pharetra tincidunt. Nulla eget aliquam lacus, vitae ullamcorper lacus. Suspendisse ultricies quis orci in aliquam. Morbi eget elit felis. Etiam consectetur eleifend libero varius lacinia. Proin justo felis, viverra lobortis
                                </p>

                                <p>
                                    Donec a ligula eget dolor ornare adipiscing. Ut varius pulvinar nisi eget feugiat. Sed dictum ante nec pharetra tincidunt. Nulla eget aliquam lacus, vitae ullamcorper lacus. Suspendisse ultricies quis orci in aliquam. Morbi eget elit felis. Etiam consectetur eleifend libero varius lacinia. Proin justo felis, viverra lobortis
                                </p>
                            </div>
                        </div>
                    </article>

jquery命令淡入弹出窗口：

所有弹出式代码都有共同的班级.more-news。

$(function() {
        $(".more-btn-1").on('click', function() {
            // CODE THAT CLOSES THE REST OF OPEN POP UPS
            $('.more-block-1').fadeIn('slow');
            return false;
        });
    });

enter image description here

Answer 1

如果所有弹出窗口共享类.more-news，您可以在显示当前弹出窗口之前隐藏该类的所有元素。

代码：

$(function() {
    $(".more-btn-1").on('click', function() {
        // CODE THAT CLOSES THE REST OF OPEN POP UPS
        $('.more-news').not('.more-block-1').fadeOut();
        $('.more-block-1').fadeIn('slow');
        return false;
    });
});

示例：http://codepen.io/skimberk1/pen/28f7917d229a359de7ee13557d742843

DRYer示例：http://codepen.io/skimberk1/pen/a0c35556dd938c87159ebac81d141290

Answer 2

试试这个：我假设你的所有弹出窗口都以更多块

开头

$(function() {
   $("div[class*='more-block']").on('click', function() {
       var $className = $(this).attr("class");       
       var id = $className.substring($className.lastIndexOf('-') + 1);
       $("div[class*='more-block']").hide();
       $('.more-block-' + id).fadeIn('slow');
       return false;       
   });
});

Jquery：如果单击链接，则弹出并关闭所有打开的弹出窗口

2 个答案: