Question

我对jQuery比较陌生，我遇到了一些麻烦。我的任务是重新设计网页并使用jQuery实现某些功能。现在，我正在尝试为导航栏中的每个“按钮”创建一个下拉菜单。当我将鼠标悬停在导航栏中的“按钮”上时，会显示一个下拉菜单。我的jQuery似乎正在运行，但下拉菜单没有显示在网页上......

这是我的代码：

<head>
    <title>Team Imperial College: Project Description</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="styles/normalize.css" type="text/css"/>
    <link rel="stylesheet" href="styles/styles.css" type="text/css"/>
</head>

以下是HTML代码（导航栏和下拉菜单代码）：

<ul class="nav_bar">
    <li class="dropdown">
        <a href="ourteam.php" class="drop_item">Our Team</a>
        <ul class="dropdown_content">
            <li><a href="meettheteam.php">Meet the Team</a></li>
            <li><a href="attributes">Attributes</a></li>
        </ul>
    </li>
    <li><a href="file:///C:/Users/amyz1/HTMLClass/p2[Amy,%20az287]/index.html">Our Project</a></li>
    <li>
        <a href="modelling.php">Modelling</a>
    </li>
    <li><a href="software.php">Software</a></li>
    <li>
        <a href="documentation.php">Documentation</a>
    </li>
    <li>
        <a href="humancentereddesign.php">Human Centered Design</a>
    </li>
</ul>

这是我的CSS代码：

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    background-color: #EDDBDB;
}

.nav_bar {
    position: fixed;
    top: 0px;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #F3F3FF;
    overflow: hidden;
}

.nav_bar li {
    float: left;
}

li a {
    display: block;
    color: #000000;
    text-align: center;
    padding: 24px 20px;
    text-decoration: none;
    font-size: 105%;
}

/*dropdown menu code*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown_content {
    display: none;
    position: absolute;
    background-color: #F3F3FF;
    min-width: 160px;
    z-index: 1;
}

.dropdown_content li a {
   color: #000000;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

.dropdown_content li a:hover {
    background-color: #DBDBE5;
}

.dropdown:hover .dropdown_content {
    display: block;
}

/ 下拉菜单代码 /

这是我的jQuery代码：

$(document).ready(function() {
    $('.dropdown').hover(function() {
       $('.dropdown_content').toggle(); 
    });

    $('.dropdown_content li a').hover();
});

请帮忙！非常感谢帮助，谢谢！

Answer 1

我要做的第一个测试是从开始时看到dropdown_content可见，以确保切换功能正常工作。

然后你可以做这个测试：

$('.dropdown').hover(function() {
       $('.dropdown_content').toggle(); 
       alert('Over here');
    });

检查多少次＆＃34;在这里＆＃34;出现。

获得这些答案将帮助您解决这个问题。

Answer 2

似乎你还没有解决鼠标移出事件。尝试更改此代码：

$('.dropdown').hover(function() {
    $('.dropdown_content').toggle(); 
});

到此：

$('.dropdown').hover(function() {
    $('.dropdown_content').toggle(); 
}, function() {
    $('.dropdown_content').toggle(); 
});

如果您只想在输入时触发它，请执行以下操作：

$('.dropdown').mouseenter(function() {
    $('.dropdown_content').toggle(); 
});

我建议查看this以获得更好的细节。

修改切换的工作原理是将元素的显示变量设置为none，这实际上意味着它不再存在于页面上。

如果您希望它在悬停时切换，则需要在0和1之间切换不透明度。

最佳方法：创建一个css类

.hidden { opacity: 0; }

编辑JQuery代码 $（document）.ready（function（）{

$('.dropdown').hover(function() { $('.dropdown').toggleClass('.dropdown', "hidden"); //you can use this for multiple elements //$(this).toggleClass(this, "hidden"); }); $('.dropdown_content li a').hover(); });

弃用方法： $（document）.ready（function（）{

$('.dropdown').hover(function() { $('.dropdown_content').toggle(() => { $('.dropdown_content').css({opacity: "0"}); }, () => { $('.dropdown_content').css({opacity: "1"}); }); }); $('.dropdown_content li a').hover(); });

注意:(）=＆gt; {}是回调函数的简写

Answer 3

if (jQuery) {
    alert(“jquery is loaded”);
} else {
    alert(” Not loaded”);
}

尽管没有出现错误，jQuery仍无法正常工作

3 个答案: