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）中，然后链接unactivate下拉事件。它会阻止您的国家/地区按钮/下拉菜单点击下拉活动。

如果你做得不好，请随意提出任何问题！

onclick下拉菜单

1 个答案: