JQuery 下推菜单的外观和感觉无法正常工作

Question

所以我创建了一个 fiddle 来向您展示我的意思:

My Fiddle

问题是菜单显示了隐藏的 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 的结构。如果你看看我的 fiddle :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;">

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

这一切都归结为了解您的 div 结构以及它们是如何重叠的。

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