Javascript 如何在单击时停止下拉菜单子项向上滑动

我试图制作一个下拉菜单，当单击时，它会保持向下，但当单击下拉区域内的任何位置时，它也不会向上滑动。只有在页面的其他位置单击时，它才会消失

不过，我正在努力实现这一目标。你可以看到我在这里做什么：

HTML

剧本

$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');

if ($childDropdown.is(':visible')) {
    $('.dropdown').slideUp(300);
} else {
    $('.dropdown').slideUp(300);
    $childDropdown.slideDown(300);
}
});

/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".dropdown").hide();
});

/* Clicks within the dropdown won't make
it past the dropdown itself */
$("nav").click(function(e){
e.stopPropagation();
});

以下是小提琴版本：

---

您需要使用event target属性并遍历其父属性，以找出触发事件的元素。如果它是“.dropdown”类中的一个元素，则不应应用向上滑动，否则关闭dropdown

}

---

请注意，我更改了$（'nav>ul>li'）中的选择，它将仅应用于上层的li元素

我没有想到使用>也-我在css中使用了很多，所以我不知道为什么我没有想到在这种情况下尝试它。

ul { padding: 0px; margin: 0px; }
li { display: inline; }
nav li { position: relative; }
nav i { cursor: pointer; font-weight: bold; background-color: red;padding: 5px; }
.dropdown { display: none; position: absolute; border:1px solid #ccc; padding: 10px; }  
.dropdown li {
display: block;
}

$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');

if ($childDropdown.is(':visible')) {
    $('.dropdown').slideUp(300);
} else {
    $('.dropdown').slideUp(300);
    $childDropdown.slideDown(300);
}
});

/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".dropdown").hide();
});

/* Clicks within the dropdown won't make
it past the dropdown itself */
$("nav").click(function(e){
e.stopPropagation();
});

$('nav > ul > li').click(function (e) {
var $childDropdown = $(this).find('.dropdown');

if ($childDropdown.is(':visible')) {

    var target = $(e.target);
    if (!$(target).parents(".dropdown").length) {
        $('.dropdown').slideUp(300);
    }