jquery - 下拉菜单无法正常工作-6ren

jquery - 下拉菜单无法正常工作

转载作者：太空宇宙更新时间：2023-11-04 10:35:43

25

4

所以我创建了这个下拉菜单，在我将鼠标悬停在“最受欢迎”标题上之前，它一直很好用。发生此事件时，该部分的高度应为 370 像素，但仍为 0 像素。我真的不明白为什么。有人可以帮助我吗？

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <!--links in font-->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
    <!--links in jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<style type="text/css">
/* do not  include in production */
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        background-color: whitesmoke;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        color: white;
    }
    .cards {
        background: white;
        padding: 10px;
        margin: 5px auto;
        border: #DDD solid 1px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
/* INCLUDE */
    #n-wrap {
        max-width: 950px;
        height: 590px;
        overflow: hidden;
        margin: 0 auto 10px;
    }
    .n-titles {
        line-height: 50px;
        width: 100%;
        height: 50px;
        text-align: center;
        transition: background-color 0.5s ease;
        color: black;
    }
    .n-titles:first-child {
        background-color: #888;
        color: white;
    }
    .n-titles:nth-child(n+2):hover {
        background-color: rgb(96, 223, 229);
        color: white;
        cursor: pointer;
    }
    .n-titles:nth-child(n+2):hover + .n-items {
        height: 370px;
    }
    .n-items {
        height: 0px;
        width: 100%;
        transition: height 0.5s ease;
        background-color: white;
        overflow: hidden;
        text-align: center;
    }
    .n-items img {
        width: 25%;
        padding-top: 15px;
    }
    .n-items img:nth-child(2) {
        padding: 0px 40px 0px 40px;
    }
    .n-items:hover {
        height: 370px;
    }
    #highlight {
        background-color: rgb(96, 223, 229);
        color: white;
    }
</style>
<body>
    <div id="n-wrap" class="cards">
        <div class="n-titles">FEATURED</div>
        <div class="n-titles">Most Popular</div>
        <div class="n-items">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
        </div>
        <div class="n-titles">On Sale</div>
        <div class="n-items">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
        </div>
        <div class="n-titles">Newest</div>
        <div class="n-items">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
            <img src="pseudo_img.jpg">
        </div>
    </div>
    <div style="height: 100vh"></div>   
</body>
    <script type="text/javascript">
        $(document).ready(function() {
            //always have first section open 
            $(".n-items:nth-child(3)").css("height", "370");
            //highlight specific title
            $(".n-items, .n-titles").hover(function() {
                $(".n-items:nth-child(3)").css("height", "0");
                $(".n-titles").removeAttr("id");
                switch ($(this).index()) {
                    case 2:
                    $(".n-items:nth-child(3)").css("height", "370");
                    $(".n-titles:nth-child(2)").attr("id", "highlight");
                    break;
                    case 4:
                    $(".n-items:nth-child(3)").css("height", "0");
                    $(".n-titles:nth-child(4)").attr("id", "highlight");
                    break;
                    case 6:
                    $(".n-items:nth-child(3)").css("height", "0");
                    $(".n-titles:nth-child(6)").attr("id", "highlight");
                    break;
                }
            }, function() {
                for (var i = 2; i <= 6; i +=2) {
                    $(".n-titles:nth-child(" + i + ")").removeAttr("id");
                }
                $(".n-items:nth-child(3)").css("height", "370");
            });
        });
    </script>
</html>

这是一个jsfiddle

最佳答案

因此，在您的 JavaScript 中，您将内嵌高度值添加到您的标记中(0px 或 370px。默认情况下，这些内嵌样式将覆盖样式表中的任何内容。这就是 CSS 特异性的工作原理:

...inline style rules always have the highest specificity, the only way to overwrite them within the CSS cascade is to use the !important statement on the relevant declarations—an approach that creates a maintenance nightmare. (via Sitepoint)

Sitepoint 还为您提供了这个问题的解决方案(好吧，即使不是最好的，也是最快的解决方案)；在悬停声明中添加一个 !important 标志:

.n-titles:nth-child(n+2):hover + .n-items {
    /* Important needed here to override inline CSS generated by JS */
    height: 370px!important;
}

虽然上面的代码解决了您最初的问题，但您可能想探索是否可以通过使用 JS 来应用标识 Accordion 状态的类(如 是-open is-closed)，然后允许您从样式表中控制所有 CSS。

关于jquery - 下拉菜单无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36163395/

25

4

0

文章推荐： c# - 使用请求参数的自定义名称

文章推荐： linux - Qt 5.6 使用 QLocalServer 和 QLocalSocket 传递文件描述符

文章推荐： python - 系数分组 : coefficient equation from a longer expression

文章推荐： linux - getopts 没有将我的选项发送到标准输出

powershell - Powershell ForEach循环间歇性工作-工作，失败，工作，失败，工作等
我在Windows 10中使用一些简单的Powershell代码遇到了这个奇怪的问题，我认为这可能是我做错了，但我不是Powershell的天才。我有这个: $ix = [System.Net.Dn
javascript - solr 正在为我的本地 iis 工作，而不是为托管 iis 工作
var urlsearch = "http://192.168.10.113:8080/collective-intellegence/StoreClicks?userid=" + userId +
c# - 串行通信不通过 QSerialPort (Qt) 工作，但通过终端 (Termite) 工作
我有一个非常奇怪的问题，过去两天一直让我抓狂。我有一个我试图控制的串行设备(LS 100 光度计)。使用设置了正确参数的终端(白蚁)，我可以发送命令(“MES”)，然后是定界符(CR LF)，然后我
.net - RegFree COM 从 C# 工作，而不是从 VBA 工作
我目前正试图让无需注册的 COM 使用 Excel 作为客户端，使用 .NET dll 作为服务器。目前，我只是试图让概念验证工作，但遇到了麻烦。显然，当我使用 Excel 时，我不能简单地使用与可
java - JAX-RS REST 在 WildFly 工作，但不在 Tomcat 工作
我开发了简单的 REST API - https://github.com/pavelpetrcz/MandaysFigu - 我的问题是在本地主机上，WildFly 16 服务器的应用程序运行正常。
python - 使用 Mongoengine 进行插入只能从 shell 工作，但不能从 Django View 工作
我遇到了奇怪的情况 - 从 Django shell 创建一些 Mongoengine 对象是成功的，但是从 Django View 创建相同的对象看起来成功，但 MongoDB 中没有出现任何数据。
Flask 应用程序上下文 : app. app_context().push() 工作，但无法让 "with app.app_context()" block 工作
我是 flask 的新手，只编写了一个相当简单的网络应用程序——没有数据库，只是一个航类搜索 API 的前端。一切正常，但为了提高我的技能，我正在尝试使用应用程序工厂和蓝图重构我的代码。让它与 pus
javascript - Google Analytics 事件跟踪 JS 在开发控制台中运行/工作，但不能从 ex 文件中运行/工作
我的谷歌分析 JavaScript 事件在开发者控制台中运行得很好。但是当从外部 js 文件包含在页面上时，它们根本不起作用。由于某种原因。例如；下面的内容将在包含在控制台中时运行。但当包含在单
node.js - ZeroMQ PUSH/PULL 通信不能通过 IPC 工作，但它可以通过 TCP 工作
这是一本名为“Node.js 8 the Right Way”的书中的任务。你可以在下面看到它: 这是我的解决方案: 'use strict'; const zmq = require('zeromq
java - 为什么 distinct 通过 flatMap 工作，而不是通过 map 的 "sub-stream"工作？
我正在阅读文本行，并创建其独特单词的列表(在将它们小写之后)。我可以使它与 flatMap 一起工作，但不能使它与 map 的“子”流一起工作。 flatMap 看起来更简洁和“更好”，但为什么 di
powershell - 怎么回声$？工作？
我正在编写一些 PowerShell 脚本来进行一些构建自动化。我发现 here echo $? 根据前面的语句返回真或假。我刚刚发现 echo 是 Write-Output 的别名。写主机 $?
Instagram 个人资料照片没有保存/工作？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
iphone - 无法让presentViewController 工作
我将一个工作 View Controller 类从另一个项目复制到一个新项目中。我无法在新项目中加载 View 。在旧项目中我使用了presentModalViewController。在新版本中，我
JavaScript 函数未加载/工作
我对 javascript 很陌生，所以很难看出我哪里出错了。由于某种原因，我的功能无法正常工作。任何帮助，将不胜感激。我尝试在外部 js 文件、头部/主体中使用它们，但似乎没有任何效果。错误要么出在
Flutter复选框未更改/更新/工作
我正在尝试学习Flutter中的复选框。问题是，当我想在Scaffold(body :)中使用复选框时，它正在工作。但我想在不同的地方使用它，例如ListView中的项目。 return Cente
Spring 侦探行李传播未传播/工作
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
java - JComboBox 工作
我有一个组合框，其中包含一个项目，比如“a”。我想调用该组合框的 Action 监听器，仅在手动选择项目“a”完成时才调用。我也尝试过 ItemStateChanged，但它的工作原理与 Action
java - 我怎样才能让interrupt()工作？
你能看一下照片吗？现在，一步前我执行了 this.interrupt()。您可以看到 this.isInterrupted() 为 false。我仔细观察——“这个”没有改变。它具有相同的 ID (1
Spring 侦探行李传播未传播/工作
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
laravel 工作/通知失败
我正在尝试在我的网站上设置一个联系表单，当有人点击发送时，就会运行一个作业，并在该作业中向所有管理员用户发送通知。不过，我在失败的工作表中不断收到此错误: Illuminate\Database\El

首页

博学

6Ren·AI

商城

jquery - 下拉菜单无法正常工作