javascript - onclick 下拉菜单

Question

我一直在尝试制作一个可以弹出的菜单。有没有办法不需要大量的功能脚本就可以做到这一点？单击事件用于在单击正文时关闭菜单，如果单击链接则关闭菜单，似乎有错误:(

可以是javascript的Jquery

html:

<div class="cc-btn">            
    <button onclick="myFunction()" class="tablabel country-btn" id="portimg"></button>
    <div id="myDropdown" class="dropdown-content">
    <a id="mclose" href="#home">Overview</a>
    <a id="mclose" href="#about">Application Process</a>
    <a id="mclose" href="#contact">Investment Options</a>
  </div>
</div>

CSS

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: rgba(0,0,0,0.9);
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999;
    border: 1px solid #aaa;
        -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out .3s;
    transition: ease-out .3s;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: rgba(220,220,220,0.3)}

.show {display:block; top:-10.5em;left:0em}

jquery

$(".country-btn").click(function(){
  $("#myDropdown").slidedown({
  direction: "up" }, 100);
});

$(html).click(function(){
  $("#myDropdown").hide();
});

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

$("#mclose").click(function(){
  $("#myDropdown").hide();
});

Answer 1

CSS 动画就是您所需要的:

CSS:

.dropdown{
  position: fixed;
  z-index: 100; // big value if needed
  top: 100vh; // hide dropdown 
  left: 0;
  transition: all 200ms ease-out; // or whatever else
}
.dropdown.active{
  transform: translate(0, -100%); // dropdown come up
}

JS:

$('.country-btn').click(()=>{
  $(".dropdown").toggleClass('active'); // dropdown switch state each time you click
});

$('#container').click(()=>{ // dropdown off when content clicked, see bellow note
  $('dropdown').removeClass('active');
});

注意:要实现单击关闭下拉菜单的正文，只需将内容包装在 div 中(此处为 #container)，然后链接取消激活下拉菜单事件。 它可以防止您点击国家/地区按钮/下拉菜单来调用下拉菜单关闭事件。

如果您有任何不明白的地方，请随时提出!