Question

我用jQuery创建了一个导航栏，它应该在点击时切换下拉列表。大多数功能都可以正常工作。

$(function()
{
    var tab = $(".dr-head");
    var childList = $(".child-list");
    tab.click(function(e)
    {
        e.stopPropagation();
        if ($(this).children("ul").css('opacity') == '0')
        {
            $("ul ul").css(
            {
                'opacity': '0'
            })
            $(this).children('ul').css(
            {
                'opacity': '1',
                'margin-top': '-15px'
            }).children('li').css(
            {
                'display': 'list-item',
                'position': 'relative',
                'left': '-75px',
                'padding-top': '12px'
            });
        }
        else
        {
            $(this).children('ul').css(
            {
                'opacity': '0',
                'margin-top': '0'
            }).children('li').css(
            {
                'left': '-75px',
                'padding-top': '0px'
            });
        }
    });
    $("body").click(function(e)
    {
        var targ = $(".nav");
        if (e.target !== targ)
        {
            $(".dr-head").children("ul").css(
            {
                'opacity': '0'
            });
        }
    })
});

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="nav.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="nav.js"></script>
    </head>
    <body>
        <nav class="nav">
            <ul>
                <li><a href="http://sarkelliancreed.comule.com">SarkellianCreed.com</a></li>
                <li class="dr-head"><a href="#">Learn</a>
                    <ul>
                        <li><a href="http://sarkelliancreed.comule.com/learn/web-design">Web Design</a></li>
                        <!-- <li></li> -->
                    </ul>  
                </li>
                <li class="dr-head"><a href="#">Tutorials and Snippets</a>
                    <ul>
                        <li><a href="http://sarkelliancreed.comule.com/c/snippets/">Password Generator</a></li>
                    </ul>    
                </li>
            </ul>
        </nav>
    </body>

一切正常，但当我点击导航栏外部时，下拉列表不会消失。我怎样才能做这些工作？ http://sarkelliancreed.comule.com/c/new/nav

Answer 1

您的代码运行正常。目前，您的＆lt; body＆gt; element只占用导航栏的高度和宽度。

向页面添加更多内容后，会增加＆lt; body＆gt;的高度。元件。

例如，这是我设置CSS的一个例子：

height:500px
background-color:orange

for＆lt; body＆gt;当你点击＆lt; body＆gt;里面的任何地方时它会工作元件。

JSFiddle：https://jsfiddle.net/j66wjtmy/

e.target不在歌剧院工作，镀铬

1 个答案: