Question

我一直在寻找能够处理以下问题的脚本：

点击外面的div时关闭div。
点击另一个div时关闭一个div。
再次点击“更多信息”时关闭div。

我想知道为什么当div处于活动状态时，减号图标不会保持不变，以及如何在上述所有场景中恢复加号图标。

Answer 1

:active的功能与您的想法不同。为了能够切换图标，首先添加这样的CSS规则，而不是:active一个：

a.trigger.isshown{
    background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}

现在，您可以像切换/隐藏/显示.toggleClass('isshown');面板一样使用.removeClass('isshown');，.addClass('isshown');和div来更改图标。< / p>

Answer 2

最终版本：jsFiddle

我将:active选择器作为@ .trigger的子类作为@Christopher进行了评论并修复了.trigger X按钮的行为以相应地切换类：

$('.trigger').click(function(event) {
    event.preventDefault();
    var panel = $(this).next('.panel');
    $('.panel').not(panel).hide();
    panel.toggle("fast");
    $('.trigger').not(this).removeClass('active'); //remove active class from other X buttons
    $(this).toggleClass('active'); //toggle the clicked button's active class
});

这样它将从其他X按钮中删除active类，并根据请求切换当前的类。

要在.panel和.trigger外部点击时关闭相应的框，请在DOM Ready处理程序中添加此框：

$(document).click('click', function(e) {
    if (!$('.panel').is(':visible')) return;
    var targ = $(e.target);
    //doesn't close the boxes if target is .panel/.trigger or their descendant
    if (targ.closest('.panel').length || targ.is('.panel')
       || targ.closest('.trigger').length || targ.is('.trigger')) return;
    $('.panel').hide('fast');
    $('.trigger').removeClass('active');
});

Answer 3

http://jsfiddle.net/dwZnG/ 试试这个尺寸。

a.trigger{
position: absolute;
text-decoration: none;
bottom:0; 
right: 0;
font-size: 17px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#333;
padding: 20px 30px 10px 15px;
font-weight: 600;
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Add-icon.png) 95% 65% no-repeat;
display: block;
}

/* Change active to a class name*/
a.trigger.active {
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}

那你的JS：

$(document).ready(function() {
    $('.trigger').click(function(event) {
        event.preventDefault();
        var me = $(this);
        var panel = me.next('.panel');
        //If active is there, remove it
        if (me.hasClass("active")) {
            me.removeClass("active");
        }
        //If it ain't...add it
        else {
            me.addClass("active");
        }
        $('.panel').not(panel).hide();
        panel.toggle("fast");
        $(document).ready(function() {
            $('.panel').hover(function() {
                mouse_inside_div = true;
            }, function() {
                mouse_inside_div = false;
            });
            $('body').mouseup(function() {
                if (!mouse_inside_div) $('.panel').hide();

            });
        });
        });
    });

与Abody说的基本相同。一旦你失败了，你应该能够找出其余的功能。

切换，隐藏和显示的问题（Jquery）

3 个答案:

最终版本：jsFiddle