Question

我在使用jQuery隐藏垂直菜单时遇到了一些麻烦。我刚刚学习了jQuery，所以我对使用它很新。我无法通过jQuery来修改任何内容（例如，更改颜色，使用任何操作.. mouseenter()，click()等）

非常感谢帮助。

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

此代码只是试图更改绿色＆＃34; link1，link2，link3＆＃34;当鼠标移动时，文字从绿色变为紫色;＃34;程序＆＃34;

***还有，有没有办法轻松减少我的ul li物品的大小？我当前可以单击的区域大于文本。我尝试修改我的display：property，但这会弄乱我列表的布局.. *******

的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>

css代码

.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;
}

Answer 1

我不认为this是您想要的，但它会修复您的一些语法

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

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

Answer 2

错误在第1行使用$ before defined

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

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

请将它放在你自己的script.js之前，这样就可以在你的脚本中调用它之前定义jQuery。

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

希望它有所帮助！

隐藏嵌套垂直菜单直到鼠标悬停（导航菜单）

2 个答案: