Question

这是我第一次使用javvascript做任何事情。我目前在我的网站上有这个代码：

HTML：

        'When the following coding was added,
        'It stopped detecting at the 3rd person.

        r2 = Sheets("Cash").Range("C1").Find("Name").row
        'not sure if the above coding will actually work,
        'but it avoids switching sheets and tries to work
        'directly on worksheet "CASH".  

        CashRowName = r2 + 1

的CSS：

<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>

<body class="menu">
<header>
<a href="#" class="menu-toggle"><img src="http://i.imgur.com/p2Yxaex.jpg" onmouseover="this.src='http://i.imgur.com/Vrl4tBl.jpg'" onmouseout="this.src='http://i.imgur.com/p2Yxaex.jpg'" /></a>
<nav class="menu-side">
This is a side menu
</nav>
</header>

<br />


<center>Content here
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script> 
(function() {
           var body = $('body');
           $('.menu-toggle').bind('click', function() {
                body.toggleClass('menu-open');
                return false;
                });
          })();
</script>
</body>
</html>

我可以做什么，以便我不需要重新点击菜单图标，只需点击导航栏即可关闭它？

谢谢！

Answer 1

你的意思是在导航栏外面点击关闭它吗？

此代码适用于我，

<a href="#" class="menu-toggle">Toggle menu</a>
<div id="example_menu" style="display:none">
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>

<script>
    $(document).ready(function () {
        $('.menu-toggle').hover(function () {
            $('#example_menu').show();
        });

        // when clicked outside
        $(this).click(function (e) {
            var el = $('#example_menu');

            if (!el.is(e.target) && el.has(e.target).length === 0) {
                el.hide();
            }
        });
    });
</script>

当我点击它时，试图让我的导航栏关闭？

1 个答案: