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

Question

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

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

1. 点击div外部时关闭它。
2. 当另一个div被点击时，关闭一个div。
3. 再次点击“更多信息”时关闭div。

我想知道为什么减号图标在div处于活动状态时不会停留在原位，以及如何在上述所有情况下恢复加号图标。

- thereceptionist

---

在 jsfiddle 中有一个“TidyUp”按钮，它可以帮助人们更好地阅读代码。:P - Fabrício Matté

我只是不明白 mouse_inside_div 是干什么用的，你只想在按钮上点击时打开/关闭/切换吧？ - Fabrício Matté

哦...a.active不会像那样工作。将 active 设置为 trigger 的子类类（a.trigger.active）。 - SomeShinyObject

我大概会离开10个小时左右，但是我已经完成了我的回答。你可以在方便的时候检查一下是否有用。 - Fabrício Matté

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')来更改图标。

- Chris

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 类，并根据要求切换当前按钮。

在 DOM 就绪处理程序中添加以下代码可在单击 .panel 和 .trigger 之外关闭框：

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

- Fabrício Matté

---

非常感谢您的支持，让我省去了很多麻烦 :) - thereceptionist

再次您好，我似乎无法在将代码从您的Fiddle放回网站代码时使其正常工作。我可能错过了什么，但我无法弄清楚是什么。 - thereceptionist

我已经重写了JS代码，以确保不会出现零宽度。但是它仍然无法正常工作。我使用了JSfiddle中的代码并添加了一个框（两个框也不起作用）:/ http://test.gaius.nu/massan.php - thereceptionist

@user1658154 我编辑了这个fiddle以添加一些优化，如果您无法删除无效字符，这里有一个修复的.js。 - Fabrício Matté

我感激不尽。现在它完美地运行了。一定与JSfiddle有关。非常感谢您的时间和努力 :) - thereceptionist

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说的一样。一旦你掌握了这个，你应该能够弄清楚其余的功能。

- SomeShinyObject

---

感谢您的帮助，Christopher :) - thereceptionist