Question

我是javascript（和jquery）的新手，并且在过去几天一直在尝试下拉菜单。我找到了这个花哨的通知菜单，我试着看看当我在页面上有两个时会发生什么。无论如何，我在这里快速举例说明了我的问题：

问题是，如果我点击两者，我可以打开两个通知容器。

enter image description here

如果我已经点击其中一个铃声，那么我点击另一个铃声，它应该关闭另一个铃声。相反，它保持打开，即使你点击另一个容器，它仍然没有关闭它。您必须单击该页面或单击通知铃声。我想把它变成你一次只能打开一个的地方。所以为了做到这一点，我尝试更改函数的名称：

如你所见：

$(function() {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function() {
        nContainer.fadeToggle(300);
        return false;
    });

    //page click to hide the popup
    $(document).click(function() {
        nContainer.hide();
    });

    //popup notification bubble on click
    nContainer.click(function() {
        return false;
    });
});

我添加了下一个被称为test（）的函数，你会想到，因为它是一个全新的函数，它的工作方式不同。相反，错误仍然存在。

我做错了什么？我甚至给了新铃，它自己的div和链接名称。我还将容器重命名为container2。

Answer 1

设置容器的全局变量：

var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");

//notification popup
$("#notification-link").click(function() {
    nContainer.fadeToggle(300);
    nContainer2.hide(); //hide the second container
    return false;
});

//page click to hide the popup
$(document).click(function() {
    nContainer.hide();
});

//popup notification bubble on click
nContainer.click(function() {
    return false;
});
});

你也可以和其他功能一样。 DEMO

Answer 2

没有必要为弹出容器提供不同的类名。我会给a-tags一个通用的classname而不是id。 href可用于标识目标弹出窗口，因此链接和目标弹出窗口之间的绑定在动作原点中设置。 JS部分将被抽象化并可以重复使用。

<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
    ... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
    ... secondpopup
</div>

点击处理程序首先隐藏所有弹出窗口，然后再打开一个新窗口。

$(".notification-link").click(function () {
    $(".notification-popup-container").hide();
    var targetId = $(this).attr('href');
    $(targetId).fadeIn(300);
    return false;
})

工作示例：http://jsfiddle.net/qyLekdwk/

Answer 3

这里的问题是如何处理事件的支持

$(function () {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function () {
        nContainer.fadeToggle(300);
    });

    //page click to hide the popup
    $(document).click(function (e) {
        if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
            nContainer.hide();
        }
    });
});
$(function test() {
    var nContainer2 = $(".notification2-popup-container");

    //notification popup
    $("#notification2-link").click(function test() {
        nContainer2.fadeToggle(300);
    });

    $(document).click(function (e) {
        if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
            nContainer2.hide();
        }
    });
});

演示：Fiddle

Javascript函数与其他函数交互

3 个答案: