所以我创建了一个 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();
});
});
最佳答案
问题实际上在于您的 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 结构以及它们是如何重叠的。
两种不同显示方式的两种解决方案。
关于JQuery 下推菜单的外观和感觉无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22671265/