Question

所以我创建了这个下拉菜单，它很有效，直到我将鼠标悬停在＆＃34; Most Popular＆＃34;标题。当这个事件发生时，当它应该是370px时，部分的高度保持在0px。我真的不明白为什么。有人能帮助我吗？

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

Answer 1

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

...内联样式规则始终具有最高的特异性，唯一在CSS级联中覆盖它们的方法是使用！important 关于相关声明的声明 - 一种创造一种声明的方法维护噩梦。（通过Sitepoint）

Sitepoint还为您提供了解决此问题的方法（嗯，最快的解决方案，如果不是最好的）;在您的悬停声明中添加cordova plugins ls标志：

!important

虽然上面的代码解决了您的初始问题，但您可能想要探索，而不是内联样式，您可以通过使用JS来应用识别手风琴状态的类来获得相同类型的功能（如{{1} } .n-titles:nth-child(n+2):hover + .n-items { /* Important needed here to override inline CSS generated by JS */ height: 370px!important; }），然后允许您控制样式表中的所有CSS。

下拉菜单无法正常使用

1 个答案: