Javascript - 点击任意位置按钮以FadeIn，FadeOut

Question

我希望我的导航在点击一个特殊按钮时淡入，并在用户点击其他地方时消失 - 无论在哪里。

我的脚本看起来像这样：

function showText() {
    var spoiler = document.getElementById('spoiler');
    var button  = document.getElementById('navicon');

    if (spoiler.style.display == 'block') {
       spoiler.style.display='none';
       button.value = 'Text einblenden';
    } else {

      spoiler.style.display='block';
      button.value = 'Text ausblenden';
     }
    return false;
}

我的解决方法是为每个导航元素提供以下代码段。

onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"

有人能帮助我吗？

Answer 1

使用冒泡将单击处理程序附加到公共父元素（例如，body）。

这是一个简单的example：

$(function () {
    $("#myButton").click(function (e) {
        $("#hidden").fadeIn();
        return false;
    });

    $("#parent").click(function() {
        $("#hidden").fadeOut();
    });
});

单击该按钮将淡入标识为hidden的元素。点击parent中的任意位置都会将其淡出。