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

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

单击div外部时关闭div

单击另一个div时关闭该div

再次单击“更多信息”时关闭div

---

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

激活的

：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
面板以更改图标的方式相同。
最终版本：
我使
：active
选择器成为@Christopher注释的
.trigger
的子类，并修复了
.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按钮中删除
活动
类，并根据请求切换当前类

要在单击
.panel
和
.trigger
外部时关闭这些框，请将其添加到DOM就绪处理程序中：

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


试试这个尺码

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说的一样。一旦你搞定了它，你就应该能够理解剩下的功能了。
JSFIDLE中有一个“TidyUp”按钮，它可以帮助人们阅读它
：P
我不明白所有的
鼠标在div中是做什么的，你只想在点击按钮时打开/关闭/切换吗？哦…
a.active
不会这样工作的。使active成为trigger的一个子类（
a.trigger.active
）我将离开大约10个小时，但我已经完成了我的答案。如果可以，请检查它是否有用。非常感谢您的支持，为我省去了很多麻烦：）您好，当我将代码放回网站代码时，我似乎无法从您的小提琴中获取代码。我可能错过了一些东西，但我不知道是什么。很抱歉回复太晚，你能链接一下页面吗？从JSFIDLE复制时，可能会带来一些零宽度的空格，这会破坏JS。或者你已经修复了吗？@user1658154我编辑了小提琴以添加一些优化，如果你没有成功删除无效字符，这里有一个问题。我非常感谢你。它现在工作得很好。一定和JSFIDLE有关。我感谢你的时间和努力：）谢谢你的帮助克里斯托弗：）