个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:35:43 25 4
gpt4 key购买 nike

所以我创建了这个下拉菜单，在我将鼠标悬停在“最受欢迎”标题上之前，它一直很好用。发生此事件时，该部分的高度应为 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 没有将我的选项发送到标准输出
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com