javascript - 切换、隐藏和显示问题 (Jquery)

Question

我一直在寻找可以解决以下问题的脚本：

http://jsfiddle.net/k7E9V/3/

1. 单击外部时关闭 div。
2. 单击另一个 div 时关闭一个 div。
3. 再次单击“更多信息”时关闭 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面板的相同方式来更改图标。

Answer 2

最终版本： jsFiddle

我使:active选择器.trigger成为@Christopher 评论的子类，并修复了.triggerX 按钮的行为以相应地切换类：

$('.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
});

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

要在单击.paneland外部时关闭这些框.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说的一样。完成此操作后，您应该能够弄清楚其余的功能。