在外部点击时，响应式菜单不会切换或关闭

Question

所以，我有这个导航菜单按钮显示在媒体查询中

@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 20px;
    background: #fff;
    border: 5px solid #343434;
    right: 20px;
    top: 60px;
    width: 25%;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
  #gallery li {
    width: 100%;
    margin: 20px 0 20px;
  }
}

<nav>
  <a href="#" id="menu-icon"></a>
  <ul>
    <li><a href="index.html" class="current">Work</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>

事情是它在移动设备上点击后不会关闭。 有线索吗？

我尝试了几个javascript / jquery没有成功。 链接 - http://www.ronyahav.com

Answer 1

我认为这是你在寻找的！

＆＃13;

＆＃13;

$(document).ready(function (){
                $('#menu-icon').click(function (){
                    $('#menu').toggle();
                });
                $('html').click(function (){
                    $('#menu').hide();
                });
                $('#menu').click(function (event){
                    event.stopPropagation();
                });
                $('#menu-icon').click(function (event){
                    event.stopPropagation();
                });
            });

＆＃13;

#menu-icon{
                border: solid 1px black;
                background: #333;
                color: white;
                display: block;
                width: 40px;
                text-align: center;
                padding: 5px 10px;
                text-decoration: none;
            }
            #menu{
                display: none;
                padding:10px;
                border: solid 1px red;
                background: #aaa;
                margin: 0;
                list-style: none;
                width: 200px;
            }

＆＃13;

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<nav>
            <a href="#" id="menu-icon">menu</a>
            <ul id="menu">
                <li><a href="index.html" class="current">Work</a>
                </li>
                <li><a href="about.html">About</a>
                </li>
                <li><a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>

＆＃13;

＆＃13;

＆＃13;