Question

我对JS没有任何经验。我搜索了一种编码这个菜单的方法，我实际上设法使用一点CSS。但是，菜单仅在用户单击关闭按钮时关闭。如果用户单击菜单中的链接或页面中的任何其他位置，则菜单将保持打开状态。我想出的代码就是这个：

<script>
var theMenu;
var originTop;
 
window.onload = function() {
   //Click to open the submenu
   element = document.getElementById("buttonu101541");
   element.onclick = openMenu;
 
   //Top position
   originTop = document.getElementById("buttonu100976").style.top;
   //Get the Menu element
   theMenu = document.getElementById("buttonu100976");
 
   //Close button
   closeBtn = document.getElementById("buttonu101584");
   closeBtn.onclick = closeMenu;
}
 
function openMenu(){
   theMenu.style.top = 0;
}
 
function closeMenu(){
   theMenu.style.top = originTop;
}
</script>

<style>
   #buttonu100976{
 
      transition-property: top;
      transition-duration: 1s;
      transition-timing-function: ease;
 
      -webkit-transition-property: top;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease;
   }

   #buttonu101541{
      cursor: pointer;
      cursor: hand;
   }

   #buttonu101584{
      cursor: pointer;
      cursor: hand;
   }
</style>

老实说，我不知道如何通过这一点。我感谢任何帮助。感谢。

Answer 1

如果您想通过点击按钮隐藏或显示菜单..您可以尝试这个..

单击“showmenu”按钮时显示菜单;

当点击“hidemenu”按钮时，它会隐藏菜单;

如果那是您想要的，下面的代码可以帮助您..

<div id="menu">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<button onclick="document.getElementById('menu').style.display = 'none';">hidemenu</button>
<button onclick="document.getElementById('menu').style.display = 'block';">showmenu</button>

Answer 2

你可以通过

实现它

创建一个标记菜单状态的变量。如果菜单已打开，请将其设置为true其他false。让默认状态为false
将eventListener添加到document.body＆amp;检查标志，如果是真的调用closeMenu函数（我假设它正在工作）＆amp;然后将标志设置为false;

您可以查看此代码段

var _isMenuOpen = false; //Create a variable to point the state of the menu

function openMenu(){
   theMenu.style.top = 0;
   isMenuOpen = true; // When menu is open set it to true
}

document.body.addEventListener('click',function(event){
 if(_isMenuOpen ===true){ //Check if menu is open
   closeMenu(); //call close menu function
   _isMenuOpen = false // set it ti false state
 }
})

希望这会有用

Answer 3

这个怎么样：

$(document).mouseup(function (e)
{
    var container = $(".menu ul");

    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

$('a').click(function () {
    $(this).next('ul').show();
});

$('.menu ul li').click(function () {
    $(this).parent('ul').stop(true, true).hide();
});

<div class="menu">
    <a>Show Menu</a>
    <ul>
        <li>link</li>
    </ul>
</div>

更新：

<html>
<head></head>
    <body>
    <div id="buttonu100976">
        <a>link</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
        $(document).mouseup(function (e)
        {
            var container = $("#buttonu100976");

            if (!container.is(e.target)
                && container.has(e.target).length === 0)
            {
                container.slideUp();
            }
        });

        $('#buttonu100976 a').click(function () {
            $('#buttonu100976').stop(true, true).slideUp();
        });

    </script>
    </body>
</html>

当用户点击链接或页面中的任何其他位置时，JS隐藏菜单

3 个答案: