Question

我设计了像

这样的页面

<html>
<body>
<div id="head">
        <img src="images/menuI.png" />
        <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        </ul>
      </div>
</body>
</html>

通常会隐藏UI

#head ul{
display:none;
}

在Js

 $('#head img').on('click', function(e){
        $('#head ul').toggle();
    });

我的问题是

如果我点击身体，头部ul必须隐藏，而不是头部和头部。

那就是当我点击身体时，那个UL tabe将被隐藏。但身体标签也有#head Ul。我尝试使用z-index。但这对我不起作用

第二个问题是。

不考虑上述情况

当我点击ul标签时，它必须显示，如果我点击li标签，则必须隐藏。

Answer 1

试试这个：

 $('#head img, #head li').on('click', function(e){
        $('#head ul').toggle();
        e.stopPropagation();
 });
 $(document).not("#head").on('click', function(e){
    $('#head ul').hide();
 });

Answer 2

正如演示一样，所有工作都适合我，请查看下面的代码段：

＆＃13;

 $('#head img').on('click', function(e){
        $('#head ul').toggle();
    });

＆＃13;

#head ul{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="head">
        <img src="//placehold.it/200x50" />
        <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        </ul>
      </div>
</body>
</html>

＆＃13;

除了一个部分之外，如何获取正文上的点击事件

2 个答案: