使用Javascript隐藏CSS下拉菜单

我有一个使用CSS的下拉列表。我希望它在单击下拉列表中的某个项目时消失，但在单词之后仍能正常工作

以下是我到目前为止的情况：

$（“span”）。单击（函数（）{
$（this.parent（）.hide（）；
$（“#text”）.html（“再次尝试将鼠标悬停在它上面。现在它已损坏，因为已为元素设置了显示属性。”）；
});
.dropDownContainer{
显示：内联块；
}
.下拉列表{
显示：无；
左侧填充：6px；
背景色：黑色；
颜色：白色；
位置：绝对位置；
}
.dropDownContainer:悬停.dropDown{
显示：块；
}
跨度{
光标：指针；
颜色：红色；
}

在这上面盘旋
这是下拉列表


单击此按钮关闭下拉列表。



它不起作用。
您应该在隐藏后立即添加一个超时以删除显示无。因此，光标的定位方式不会自动重新打开（悬停时），因此不会出现问题

$("span").off().click(function(){
    var dropdown = $(this).parent();
    dropdown.hide();
    setTimeout(function(){dropdown.removeAttr('style');}, 300);
    $("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});

我已经更新了你的代码，看看这把小提琴：


在这上面盘旋
这是下拉列表


单击此按钮关闭下拉列表。



它不起作用。
.dropDownContainer{
显示：内联块；
}
.下拉列表{
显示：无；
左侧填充：6px；
背景色：黑色；
颜色：白色；
位置：绝对位置；
}
跨度{
光标：指针；
颜色：红色；
}
$（“.dropDown span”）。单击（函数（）{
$（this.parent（）.slideUp（）；
});
$（“span.trigger”）.hover（函数（）{
$（'.dropDown'）.slideDown（）；
});
您没有任何事件处理程序可以悬停并首先打开它。如果您使用CSS关闭或打开某个对象，那么也应该使用CSS来打开或关闭它，JS/jQ也是如此，否则它们可能会冲突

一小条

$（.dropDownHeader”）.on（'mouseenter'，function（）{
$（“.dropDownContainer”）.show（）；
$（“kbd”）。在（“单击”，函数（）上{
$（'.dropDownContainer'）.hide（）；
});
});
.dropDownContainer{
显示：无；
左侧填充：6px；
背景色：黑色；
颜色：白色；
位置：绝对位置；
}
.dropDownHeader:悬停.下拉{
显示：块；
}
kbd{
光标：指针；
颜色：红色；
}

在这上面盘旋
这是下拉列表

单击此按钮关闭下拉列表

它不起作用

效果很好。“off（）”的功能是什么？哎呀，在发布答案之前，我忘了删除不需要的
off（）
。实际上，在我的试用版中，我直接在你的代码上打开了JS控制台并覆盖了你的事件，这就是为什么我先关闭它。它意味着解除绑定到此元素的所有事件的绑定！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
  <span class="trigger">hover over this</span>
  <div class="dropDown">
    this is the dropdown<br><br>

    click <span>this</span> to close drop down.
    <br><br>
    It doesn't work.
  </div>
</div>
<div id="text">

</div>

.dropDownContainer{
  display: inline-block;
}
.dropDown{
  display: none;
  padding-left: 6px;
  background-color: black;
  color:white; 
  position: absolute;
}


span{
  cursor:pointer;
  color: red;
}

$(".dropDown span").click(function(){
    $(this).parent().slideUp();
});

$("span.trigger").hover(function(){
    $('.dropDown').slideDown();
});