我正在尝试制作一个简单的下拉菜单,使用最少的JS和CSS。
它运行良好,但一次触发所有子元素,而不是悬停在元素上。
<nav id="product-index">
<ul class="product-list">
<li class="prod-trig">Bikes</li>
<li><ul class="product-sub">
<p>Bike product sub</p>
</ul></li>
<li class="prod-trig">Parts & Tools</li>
<li><ul class="product-sub">
<p>Bike product sub</p>
</ul></li>
<li class="prod-trig">Clothes & Shoes</li>
<li><ul class="product-sub">
<p>Bike product sub</p>
</ul></li>
<li class="prod-trig">Protection</li>
<li><ul class="product-sub">
<p>Bike product sub</p>
</ul></li>
<li class="prod-trig">More</li>
<li><ul class="product-sub">
<p>Bike product sub</p>
</ul></li>
</ul>
</nav>
$(document).ready(function() {
$('.prod-trig').hover(function() {
$('.product-sub').stop().slideDown(400);
}, function() {
$('.product-sub').stop().slideUp(400);
});
});
这是小提琴。http://jsfiddle.net/npLwX/55/
试试这个:
$('.prod-trig').hover(function() {
$(this).next().find('.product-sub').stop().slideDown(400);
}, function() {
$(this).next().find('.product-sub').stop().slideUp(400);
});
js小提琴示例
您需要定位特定元素而不是整个类。