个人中心
gpt4 book ai didi

javascript - Lavalamp 下拉重叠

转载 作者：行者123 更新时间：2023-11-28 19:06:16 26 4
gpt4 key购买 nike

我正在尝试使用 jquery 的 lavalamp 插件并为其添加下拉功能。

下拉菜单和 lavalamp 效果在此代码上都可以正常工作，除了我的问题是下拉菜单扩展了 lavalamp 效果。

我确定问题出在 css 上，但我无法确定它...欢迎任何提示或指示。

这是代码。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>        
        <link type="text/css" href="css/sample.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>    
        <script type="text/javascript" src="js/jquery.lavalamp.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/slider.js"></script>    
        <script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

    </head>
    <body>
        <ul class="drop-down" id="1">
        <li class="top">         
           <div class="topbar"><a href="#">Home</a></div>
           <div class="sub">
            <ul>
                <li class="1">
                    <div><a href"#">Calendar</a></div>
                </li>
                <li class="2">
                    <div><a href"#">account</a></div>
                </li>

            </ul> </div>
        </li>
        <li class="top1">
            <div class="topbar1"><a href="#">Resort</a></div>
            <div class="sub1"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>
        <li class="top2">
            <div class="topbar2"><a href="#">Hotel</a></div>
            <div class="sub2"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>

        <li class="top3">
            <div class="topbar3"><a href="#">Farm House</a></div></li>
    </ul>




</html>

对应的css

.drop-down {
    position: relative;
    height: 35px;            
    background: #e8e8e8 url('../img/three_0.gif') repeat-x;
    padding: 0px;
    margin:  0px;   
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.top, .top1, .top2, .top3,
.top4, .top5, .top6 {
    float: left;    
    padding-left: 24px;
    padding-right: 24px;
    line-height: 30px;
    list-style: none;
}

.drop-down li.back {
    background: #cecece;
    width:auto;
    height: 32px;
    margin-top: 2px;
    z-index: 8;
    position: absolute;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.drop-down li div.topbar, .drop-down li div.topbar1,.drop-down li div.topbar2,
.drop-down li div.topbar3{
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative; 

}


.sub, .sub1, .sub2, .sub3{
    display: none;    
    float: left;
    top: 34px;
    left: 0;
    width: 160px;   
    margin: 0px 0 0 -4px;
    background: #cecece;
    white-space: nowrap;    
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-top-right-radius: 7px;    
    height: auto;
    position: relative;
    z-index: 20;
}

.sub li, .sub1 li, .sub2 li, .sub3 li{
    display: block;
    height: 25px;
    position: relative;
    z-index: 30;
    float: left;
    width: 160px;   
    font-weight: normal;
    background: #cecece;
}

.sub li a, .sub1 li a , .sub2 li a, .sub3 li a{
    position: relative;
    z-index: 40;
    height: 25px;
    display: block;
    float: left;
    line-height: 20px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;    
    padding-right: 5px;
    text-align: center;
}

.sub li a:hover, .sub1 li a:hover, .sub2 li a:hover, .sub3 li a:hover{
    background: #ffb600;
    width: 120px;    
    line-height: 20px;          
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
}

连同我用于下拉菜单的 jquery。

$(document).ready(function() {   

        $('li.top').hover(function () {            
            $('div.sub').slideDown('medium');
    }, 
        function(){
            $('div.sub').stop(true,true).css('display','none');

    });
        $('li.top1').hover(function () {            
            $('div.sub1').slideDown('medium');
    }, 
        function(){
            $('div.sub1').stop(true,true).css('display','none');
    });        

        $('li.top2').hover(function () {            
            $('div.sub2').slideDown('medium');
    }, 
        function(){
            $('div.sub2').stop(true,true).css('display','none');
    });     

});

最佳答案

.1 和 .2 上的 css 是什么？另外，更改这些名称以便有一个字母作为第一个字符是一个非常好的主意，例如.c1 和 .c2

我注意到你有 .sub li，但是 .sub 是一个 div，要么抛弃 div 并使 ul 的类成为子类(或者更好的是 id，因为你正在使用像 id 一样的这些类)或者使它成为

.sub ul li 在 .sub li 的位置

此外，border-radius 现在是标准的，因此您可以放弃 -moz 和 -webkit 废话

关于javascript - Lavalamp 下拉重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3316889/

26 4 0
文章推荐： asp.NET 如果在 DIV 标签里面呢？
文章推荐： css - 嵌套列表之间的空格
文章推荐： html - CSS:如果我更改缩放比例，背景图像不再对齐
文章推荐： c# - 即时通讯通知
行者123
个人简介

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

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