Question

所以我创造了一个小提示，告诉你我的意思：

问题是菜单显示隐藏的div的背景颜色，但我需要它是透明的。我试图让它透明但没有快乐。不确定是否需要添加另一个div，但我试过这个？因此，我的目标是将箭头图标放在透明背景上，当菜单向下滑动时，灰色显示。

<div id="nav-mobile" style="width: 100%; text-align:center;">

    <div style="background-color: #E6E8E8;">
    <ul style="list-style:none; margin:0; padding: 0;">
        <li class="topmenutitle">JUMP TO:</li>   
        <li class="topmenulink"><a href="" class="menutop">What we do</a></li>        
        <li class="topmenulink"><a href="" class="menutop">All things us</a></li>        
        <li class="topmenulink"><a href="" class="menutop">CodeEd</a></li>        
        <li class="topmenulink"><a href="" class="menutop">Let's talk</a></li>
    </ul>

    <div style="background-color: transparent;">
    <a href="#"><img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png" /></a>
    </div></div></div>

<div id="header">header</div>

.menutop:link {text-decoration: none; color: #F60;}
.menutop:visited {text-decoration: none; color: #F60;}
.menutop:hover {text-decoration: underline; color: #F60;}
.menutop:focus {text-decoration: none; color: #F60;}
.menutop:active {text-decoration: underline; color: #F60;}

body{
    margin: 0;
}

#header{
    background-image:url(http://www.photo-dictionary.com/photofiles/list/4615/6106crash_test_dummy.jpg);
}

li.topmenutitle{padding-bottom: 27px; padding-top: 37px; color: #CCC; font-size: 24px;}

li.topmenulink{width: 100%;height: 16px;line-height: 26px;font-size: 24px;text-align: center;padding-bottom: 27px; padding-top: 17px;}

$(document).ready(function() {

    $('#nav-mobile ul').hide();
    $('#nav-mobile').click(function(e) {
        e.preventDefault();
        $('#nav-mobile ul').slideToggle();
    });
});

Answer 1

问题实际上是你如何构建你的div。如果你看看我的小提琴：http://jsfiddle.net/Y6bab/3/你会发现他们在开始时都堆积在一起，所以当你的电话在技术上是正确的时候，你没有达到你想要的效果因为它们都是彼此叠加的，只有<div style="background-color: #E6E8E8;">有颜色，因此就是显示的内容。

我添加了两个css类：

.transparent{
    background: transparent;   
}
.bgSet{
    background: #E6E8E8;
}

给你的起点div一个新的课程：

<div id="nav-mobile" class="transparent" style="width: 100%; text-align:center; border:1px solid #d00;">

并在jquery点击功能中添加了两行：

$('#nav-mobile').toggleClass('transparent');
$('#nav-mobile').toggleClass('bgSet');

这应该可以解决你的问题，并记住测试你的div如何对齐，即使它是一个非常粗糙的测试，就像我用边框一样。在你赋予它们所有独特和独特的属性之后，它们通常会很快放弃它。

修改实现此目的的另一种方法是在css中将id和背景颜色添加到下面的行：

<div style="background-color: transparent;">

由于目前这是透明的，箭头背后的背景将显示其背后的内容。一旦你这样做，你可以在你的CSS中给#nav-mobile一个背景颜色，你不必担心任何新的jQuery。

这一切都归结为你知道你如何构建你的div，以及它们是如何重叠的。

两种不同显示方法的两种解决方案。

JQuery下推菜单的外观和感觉不能正常工作

1 个答案: