Javascript 使用“单击”事件淡入和淡出隐藏的div

我目前正在努力学习jquery的基础知识，并希望得到一些关于如何实现以下目标的建议

当我点击“下拉”链接时，隐藏的链接列表会淡入淡出，当我点击页面的任何部分（除了#innerList标记）时，隐藏的列表会淡出，或者如果我点击其中一个隐藏的链接，列表也会淡出

我目前的努力就在这里

---

如果能得到一些关于如何实现这一结果的建议，那就太好了。

如果您将JS更改为following，您将获得所描述的效果

var innerList = '#innerList';

    $(innerList).hide();

    $('a.mainButton').click(function(e) {
        $(innerList).fadeIn('slow');
        e.stopPropagation();
    });
    $(document).click(function(e){
        $(innerList).fadeOut('slow');
    });

此外，我还建议将标签href更改为“#”，以便进行测试，或者完全删除href

---

创建了一个。

如果将JS更改为以下，则会获得所描述的效果

var innerList = '#innerList';

    $(innerList).hide();

    $('a.mainButton').click(function(e) {
        $(innerList).fadeIn('slow');
        e.stopPropagation();
    });
    $(document).click(function(e){
        $(innerList).fadeOut('slow');
    });

此外，我还建议将标签href更改为“#”，以便进行测试，或者完全删除href

创建了一个。

你可以这样做（我遗漏了“隐藏链接”的含义，这是否意味着当你点击链接时它也必须隐藏？）

在这里拉小提琴

你可以这样做（我遗漏了“隐藏链接”的含义，这是否意味着当你点击链接时它也必须隐藏？）

在这里拉小提琴

这个怎么样（小得多的代码）

这应该是跨浏览器的，因为使用了jQuery（小得多的代码）

---

这应该是跨浏览器的，因为使用jQuery不会停止所有浏览器中的事件传播。哪些浏览器不工作？在FF和IE.jQuery文档中工作，但没有说明它是非跨浏览器的，这是jQuery应该帮助的事情之一。对不起，您是对的，jQuery确实覆盖了stopPropagation函数。@Zanfa感谢您的确认。你能取消你的否决票吗？（我假设是你，因为没有其他评论）只有编辑你的答案，我才能更改我的投票。否则它将被锁定。不会停止所有浏览器中的事件传播。哪些浏览器不工作？在FF和IE.jQuery文档中工作，但没有说明它是非跨浏览器的，这是jQuery应该帮助的事情之一。对不起，您是对的，jQuery确实覆盖了stopPropagation函数。@Zanfa感谢您的确认。你能取消你的否决票吗？（我假设是你，因为没有其他评论）只有编辑你的答案，我才能更改我的投票。否则它会被锁定。#链接很好。在我的回答中，我没有提到这一点，链接的观点很好。在我的回答中，我没有提到jQuery不会停止所有浏览器中的事件传播。令人困惑的是，jQuery使用了相同的名称“stopPropagation”，这在所有浏览器中都不受支持。然而，他们似乎只是使用了相同的名称并使其跨浏览器。不会停止所有浏览器中的事件传播。混淆之处在于jQuery使用了相同的名称“stopPropagation”，这在所有浏览器中都不受支持。然而，他们似乎只是简单地使用了相同的名称，并使其跨浏览器。

var $innerList = $('#innerList').hide(); //Set $innerList to the DOM object so that it only needs to be found once. Also hide the object. "hide()" returns self so we can combine the two in one line.
$('ul.dropDown').click(function(e) {
    $innerList.fadeToggle('slow');
    e.stopPropagation(); //stop the click event bubbling back to the document which would also fire the function below (undoing what this function just did)
});
$(document).click(function() {
    $innerList.fadeOut('slow');
});