Question

我正在尝试将下面找到的解决方案应用到我的设计中，但我似乎无法将菜单关闭。我是这个编码的新手，所以任何帮助都会受到赞赏。

这是我尝试应用于我的代码的修复：

我的代码：

  <body>
    <div class="container">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li id="clickMe1"><a href="#s1">Menu 1</a>
                <span id="s1"></span>
                <ul class="subs subhide1">
                    <li><a href="#">Header a</a>
                        <ul>
                            <li><a href="http://www.yahoo.com" target="blank">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header b</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li id="clickMe2" ><a href="#s2">Menu 2</a>
                <span id="s2"></span>
                <ul class="subs subhide2">
                    <li ><a href="#">Header c</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header d</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li ><a href="#s3">Menu 3</a>
                <span id="s3"></span>
                <ul class="subs">
                    <li><a href="#">Header e</a>
                        <ul>
                            <li><a href="#">Subsdfa</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header f</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>

                    <li><a href="#">Header g</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 4</a></li>
          <!--  <li><a href="#">Menu 5</a></li>  reserved for possible use later--> 

        </ul>
    </div>

    <script type="text/javascript">


     $('#nav > li').click(function () {
     $(this).siblings().find('ul.subs').hide();
      $(this).find('ul.subs').toggle();
     });

     </script>

     <script type="text/javascript">

       $('html').click(function() {
    //Hide the menus if visible
    });

    $('.container').click(function(event){
    event.stopPropagation();
     });
     </script>


      </body>

Answer 1

您需要使用.Ready()功能，请尝试以下

      <script type="text/javascript">
    $(document).ready(function(){
           $('html').click(function() {
        //Hide the menus if visible
        });

        $('.container').click(function(event){
        event.stopPropagation();
         });
});
         </script>

Answer 2

您可以根据自己的特定需求进行调整。 Live demo here (click).

$(document).click(function(e) {
  //if what is clicked isn't in the menu
  if (!$.contains($myMenu[0], e.target)) {
    $('ul li ul').hide(); //target the opened menus and hide them
  }
});

当我使用Jquery在其外部单击时关闭菜单

2 个答案: