Question

我无法弄清楚我的代码在尝试制作jquery下拉菜单时出了什么问题。我附上了我的html，css和javascript。请看看并帮助我，谢谢。

＆＃13;

$(document).ready(function() {
$("li").hover(function(){
    $("this").find('ul > li').fadeToggle(500);
});
});

＆＃13;

ul{
    margin: 0;
    padding:0;
    list-style: none;
}
ul li{
    float: left;
    width: 250px;
    height: 30px;
    line-height: 30px;
    background-color: #099;
    text-align: center;
}

ul li li {      
    background-color: #099;
    color: #000;
    display: none;
}
ul li a {
    text-decoration:none;
    color: #000;  
}

ul li li:hover{
    background:#03F;
      
}
ul li li a {
    text decoration: none;
    color: #000;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">

<title>untitled</title>
</head>

<body>
<div class="page">
<header>
    <a class="logo" href="#"></a>
     <nav class="nav_menu">
            <ul class="dropmenu">
                <li><a href="#">Link 1</a>
                        <ul>
                            <li><a href="#">Sub Link 1-1</a></li>
                            <li><a href="#" class="selected">Sub Link 1-2</a></li>
                            <li><a href="#">Sub Link 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a>
                        <ul>
                            <li><a href="#">Sub Link 2-1</a></li>
                            <li><a href="#">Sub Link 2-2</a></li>
                            <li><a href="#">Sub Link 2-3</a></li>
                        </ul>
                        </li>
                    <li><a href="#">Link 4</a>
                        <ul>
                            <li><a href="#">Sub Link 4-1</a></li>
                            <li><a href="#">Sub Link 4-2</a>
                                <ul>
                                    <li><a href="#">Sub Link 4-2-1</a></li>
                                    <li><a href="#">Sub Link 4-2-2</a></li>
                                    <li><a href="#">Sub Link 4-2-3</a></li>
                                </ul>
                                </li>
                  
                            <li><a href="#">Sub Link 4-3</a></li>
                   
                          
                        </ul>
         
                    </li>
                </ul>
            </nav>
</header>
</div>
<script type="text/javascript" src="js/plugin/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

＆＃13;

＆＃13; 我试图制作一个jquery下拉菜单时，我无法弄清楚我的代码中出了什么问题。我附上了我的html，css和javascript。请看看并帮助我，谢谢。

Answer 1

使用$(this)而不是$("this")

<强>演示

＆＃13;

$(document).ready(function() {
$("li").hover(function(){
    $(this).find('ul > li').fadeToggle(500);
});
});

＆＃13;

ul{
    margin: 0;
    padding:0;
    list-style: none;
}
ul li{
    float: left;
    width: 250px;
    height: 30px;
    line-height: 30px;
    background-color: #099;
    text-align: center;
}

ul li li {      
    background-color: #099;
    color: #000;
    display: none;
}
ul li a {
    text-decoration:none;
    color: #000;  
}

ul li li:hover{
    background:#03F;
      
}
ul li li a {
    text decoration: none;
    color: #000;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">

<title>untitled</title>
</head>

<body>
<div class="page">
<header>
    <a class="logo" href="#"></a>
     <nav class="nav_menu">
            <ul class="dropmenu">
                <li><a href="#">Link 1</a>
                        <ul>
                            <li><a href="#">Sub Link 1-1</a></li>
                            <li><a href="#" class="selected">Sub Link 1-2</a></li>
                            <li><a href="#">Sub Link 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a>
                        <ul>
                            <li><a href="#">Sub Link 2-1</a></li>
                            <li><a href="#">Sub Link 2-2</a></li>
                            <li><a href="#">Sub Link 2-3</a></li>
                        </ul>
                        </li>
                    <li><a href="#">Link 4</a>
                        <ul>
                            <li><a href="#">Sub Link 4-1</a></li>
                            <li><a href="#">Sub Link 4-2</a>
                                <ul>
                                    <li><a href="#">Sub Link 4-2-1</a></li>
                                    <li><a href="#">Sub Link 4-2-2</a></li>
                                    <li><a href="#">Sub Link 4-2-3</a></li>
                                </ul>
                                </li>
                  
                            <li><a href="#">Sub Link 4-3</a></li>
                   
                          
                        </ul>
         
                    </li>
                </ul>
            </nav>
</header>
</div>
<script type="text/javascript" src="js/plugin/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

＆＃13;

jquery下拉菜单无法弄明白

1 个答案: