Javascript 用JS隐藏下拉列表

将鼠标悬停在div（

选择器

）上时，将显示一个下拉列表。在元素中单击时，将调用JS函数并执行多个任务。没关系。我的问题是，我希望下拉列表在单击后消失，但不能使用

.style.display=“none”

作为示例，因为我希望它在再次将鼠标悬停在

选择器上时出现。
我不熟悉JQuery，所以使用普通JS会感觉更舒服


function TheJSFunction（什么）{
//警惕（什么）；
//首先尝试：删除要下拉列表的类，然后添加类“下拉列表内容”（vis:隐藏和不透明度0）：
//document.getElementById（“dc”）.className=''；
//document.getElementById（“dc”）.classList.add（'dropdown-content'）；
//第二次尝试：将不透明度设置为0（或将可见性设置为隐藏）
//但当鼠标悬停在选择器上时，不会再次显示下拉列表：
//document.getElementById（“dc”）.style.opacity=0；
}
选择器{
显示：内联；
浮动：左；
填充：8px；
背景:"282828 ;；
颜色：#ffffff；
宽度：300px；
文本对齐：居中；
}
.选择器：悬停{
背景色：#800000；
过渡：所有0.5s缓解；
}
.下拉内容{
可见性：隐藏；
不透明度：0；
位置：绝对位置；
背景色：#ff8080；
边缘顶部：8px；
左边距：-8px；
宽度：316px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.4）；
z指数：1；
}
.选择器：悬停.下拉内容{
能见度：可见；
不透明度：1；
过渡：所有0.5s缓解；
}
.下拉列表内容.DD_内容{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
光标：指针；
}
.dropdown content.DD_content:悬停{
背景色：#ffb3b3；
过渡：所有的1容易；
}
蜥蜴
新品种
编辑记录

要有效地做到这一点，您需要做一些JS来做到这一点。您可以在单击时添加类或设置可见性属性，等待

onmouseout

事件，然后删除类/属性以重置它。这甚至适用于触摸设备

示例代码：

var dropdown=document.querySelector（“.dropdown content”）；
addEventListener（“单击”，函数（）{
dropdown.style.visibility=“hidden”；
});
addEventListener（“mouseout”，function（））{
dropdown.style.visibility=“”；
});

编辑：

作为奖励，您可以轻松地在同一行中切换属性。由于这些因素会导致DOM回流，这意味着如果它是通过CSS选择器控制的，那么它不应该显示出来。所以只要

函数ClickHandler（元素）{
element.style.visibility=“无”；
element.style.visibility=“”；
}

您可以将onmouseover添加到div

<div class="Selector" onmouseover="reset()">Lizards
    <div class="dropdown-content" id="dc">
      <div class="DD_content" onclick="TheJSFunction('New');">New Specie</div>
      <div class="DD_content" onclick="TheJSFunction('Edit');">Edit record</div>
    </div>
  </div>

---

您需要添加一个事件侦听器来覆盖“TheJSFunction”函数中指定的不透明度

document.getElementsByClassName('Selector')[0].addEventListener("mouseover", function(){ 

        document.getElementById("dc").style.opacity=1;


        });

---

您能在单击时设置显示：无，然后在鼠标离开时撤消吗？我认为这会起作用，因为后者会在前者之后立即发射。@Hamms:I不想禁用悬停的可能副本。@jhpratt我会尝试一下……我会使用style.display=“none”和style.display=“block”。比汉克斯更管用。这似乎和公认的答案非常相似：单击“将不透明度设置为0”（或“显示为无”），然后单击鼠标悬停选择器，恢复不透明度（或“显示”）。

document.getElementsByClassName('Selector')[0].addEventListener("mouseover", function(){ 

        document.getElementById("dc").style.opacity=1;


        });