Javascript 单击“显示/隐藏信息”

社区

我们的想法是创建一个包含文本的普通列表，有时还可以单击链接

问题：
如何使此列表仅在按下按钮时关闭，而不是在用户单击列表中的任何项目或屏幕上的任何位置时关闭。

小提琴：

HTML:

<button data-text-swap="Show" id="trigger">Hide</button>    
<div id="drop">   
<a href="#">Menu item 1</a>
    <a href="#">Menu item 2</a>
    <a href="#">Menu item 3</a>
    <a href="#">Menu item 4</a>
</div> 

---

请使用以下javascript代码：

$(document).ready( function(){

$("button").on("click", function() {


    $('#drop').toggle();

    var el = $(this);

    if (el.text() == el.data("text-swap")) {

        el.text(el.data("text-original"));} 
    else {

        el.data("text-original", el.text());

        el.text(el.data("text-swap"));}
 });

});

---

您缺少的一件事是在单击下拉列表中的链接时停止传播。这将阻止它冒泡到$（文档）。单击事件处理程序

$('#drop a').click(function(e){ e.stopPropagation(); });

我假设您有$（文档）。单击此处的处理程序，这样您就可以通过单击下拉菜单外部来关闭下拉列表

---

看到这把小提琴：

那你为什么要添加

$（文档）。单击
监听器，它会执行
$（'#drop'）。hide（）
？它有点像这个。。。我试过了，效果很好-编辑：哦，刚刚看到第二部分。。。是 啊加入我上面的问题。。。如果不希望在任何单击时关闭，请删除文档单击事件。。。
$('#drop a').click(function(e){ e.stopPropagation(); });