隐藏嵌套的垂直菜单，直到鼠标悬停(导航菜单)

我在使用 jQuery 隐藏我的垂直菜单时遇到了一些麻烦。我刚刚学习了jQuery，所以我对使用它相当陌生。我无法让jQuery修改任何东西（例如，使用任何操作更改颜色。 mouseenter()、click()等）

非常感谢帮助。

编辑：我在JSLint.中遇到错误，试图在括号编辑器中使用jQuery。不知道该怎么办：/第一个错误在第 1 行使用 $ 定义之前。任何帮助都会很棒

此代码只是尝试将鼠标悬停在"程序"上时将绿色"link1， link2， link3"文本从绿色更改为紫色

另外，有没有办法轻松减小我的 ul li 物品的大小？我当前可以单击的区域大于文本。我尝试修改我的显示：属性，但这弄乱了我的列表的布局。*******

jQuery

$(document).ready(function() {
    $('#headerMenu > li').mouseenter(function() {
       ('#headerMenu ul li a').Color('purple'); 
    });
});

.HTML：

<!DOCTYPE html>
<html>
<head>
    <link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
    <script type='text/javascript' src='script.js'></script>
    <title>Home Page</title> 
</head>
<body>
    <div class="header">
        <ul id="headerMenu">
            <li>
                <a href="#">DROP</a>
                <ul>
                    <li><a href='#'>LINK 1</a></li>
                    <li><a href='#'>LINK 2</a></li>
                    <li><a href='#'>LINK 3</a></li>
                </ul>
            </li>
            <li><a href="#">LOGIN</a></li>
            <li><a href="#">ABOUT</a></li>
        </ul>
    </div>
    <div class="wrapper">
        <div id="mainPhoto">   fffffff
            <div> change color</div>
        </div>
        <div id="mainScrollUp">    </div>
    </div>
</body>
</html>

云服务器代码

.header {
    background-color: skyblue;
    font-family: sans-serif;
    height: 75px;
    width: 100%;
    display: table;
}
/* Main centered menu on top */
    #headerMenu {
    text-align: center;
    padding: 0;
    list-style: none;
    display: table-cell;
    vertical-align: bottom;
}
#headerMenu > li {
    display: inline-block;
    text-align: center;
}
#headerMenu li a {
    text-decoration: none;
    color: black;
    padding: 2rem;
    }
#headerMenu li a:hover {
    color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
    text-decoration: none;
    list-style: none;
    display: block;
    color: red;
    padding-left: 0;
    position:absolute;
}
#headerMenu ul li a{
    color:green;
}

#mainPhoto {
    height: 650px;
    width: 100%;
    background-color: bisque;
    color:palevioletred;
}
#mainScrollUp {
    z-index: 1;
    height: 1000px;
    width: 100%;
    background-color: aqua;
    clear: both;
}
.fixed {
    position: fixed;
    top: 0;
}

错误在第 1 行使用 $ 定义之前

你忘了定义jQuery。尝试将以下行添加到 HTML 文件中的标头标记中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

请把它放在你自己的脚本之前.js这样在脚本中调用它之前就定义了jQuery。

了解您的垂直子菜单目标，我想出了这个：https://jsfiddle.net/wsj59p20/

希望对您有所帮助！

我不认为这是你想要的，但它修复了你的一些语法

$(document).ready(function() {
    $('#headerMenu > li').mouseenter(function() {
       $(this).find('ul>li>a').css('color', 'purple'); 
    });
});

此外，您的"在定义之前使用 $"错误似乎是因为您在示例代码中根本没有加载 jQuery。

相关内容

最新更新

热门标签：