切换、隐藏和显示问题 (Jquery)答案

【问题标题】：Issues with toggle, hide and show (Jquery)切换、隐藏和显示问题 (Jquery)
【发布时间】：2012-09-09 13:30:52
【问题描述】：

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

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

在 div 外部单击时将其关闭。
单击另一个 div 时关闭一个 div。
再次单击“更多信息”时关闭 div。

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

【问题讨论】：

jsfiddle 中有一个“TidyUp”按钮，它可以帮助人们阅读它。 :P
我只是不明白mouse_inside_div 的全部用途，您只想在单击按钮时打开/关闭/切换吗？
哦...a.active 不会那样工作。激活触发器的类子类 (a.trigger.active)
接下来的 10 个小时左右我会离开，但我已经完成了我的回答。尽可能检查它是否有用。

标签： javascript jquery css show-hide popupwindow

【解决方案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 面板来更改图标。

【讨论】：

【解决方案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');
});

【讨论】：

非常感谢您的支持，为我省了很多麻烦:)
您好，当我将您的 Fiddle 中的代码放回网站代码时，我似乎无法使其正常工作。我可能错过了一些东西，但我不知道它是什么。
抱歉回复晚了，可以链接页面吗？从 jsfiddle 复制时，它可能会带来一些零宽度的空格，这会破坏你的 JS。还是你已经解决了？
@user1658154 我编辑了小提琴以添加一些优化，如果你没有设法删除无效字符，这里是fixed .js。
感激不尽。它现在完美运行。一定和 JSfiddle 有关。感谢您的时间和精力:)

【解决方案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();

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

基本上和阿博迪说的一样。完成此操作后，您应该能够弄清楚其余的功能。

【讨论】：

感谢您的帮助克里斯托弗 :)