到目前为止,你们一直在帮助我让这个小曲子正常工作。我还有一个要求:
这个标记:
<div id="themes">
<h2>Research Themes</h2>
<ul>
<li class="tier_1"><a class="enviro" href="">Learn about our approach to the <strong>environment</strong></a>
<ul class="tier_2 hide">
<li><a href=""><em>How we are tying this all together</em></a></li>
<li><a href="off.html"><strong>Project:</strong> Solor Powered Biofactories</a></li>
<li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li>
<li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li>
</ul>
</li>
<li class="tier_1"><a class="health" href="">Learn about our approach to <strong>human health</strong></a>
<ul class="tier_2 hide">
<li><a href="">Project name numero uno goes here</a></li>
<li><a href="">Project name numero dos goes here</a></li>
<li><a href="">Project name numero tres goes here</a></li>
</ul>
</li>
<li class="tier_1"><a class="defense" href="">Learn about our approach to <strong>national defense</strong></a>
<ul class="tier_2 hide">
<li><a href="">Project name numero uno goes here</a></li>
<li><a href="">Project name numero dos goes here</a></li>
<li><a href="">Project name numero tres goes here</a></li>
</ul>
</li>
</ul>
</div><!-- // end themes -->
而这个jQuery:
$(function(){
$(".tier_1 > a").hover(function() {
var currentList = jQuery(this).parents('li').find('.tier_2');
$(currentList).slideToggle();
jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp();
return false;
});
});
创建这个漂亮的“主题”滑块,您可以在此页面的右栏中看到工作:http: //clients.pixelbleed.net/biodesign/
我有两个问题...当您点击 tier_2 ul 下的链接之一时,悬停会缩回上滑/下滑。当有人在嵌套的 li 盘旋时,我希望它保持滑出状态。所以幻灯片应该只发生在 tier_1 元素的悬停时。我还想在悬停时向 tier_1 链接上的 a 元素添加一个“活动”类。所以 [a class="enviro"..] 在悬停时会变成 [a class="enviro active"]。然后,当悬停其他 tier_1 项目之一时,将删除它。这样,当有人查看嵌套元素时,漂亮的颜色图标可以保持可见。
甚至不确定悬停是否有可能,但我想如果有人知道它会在这里的方式。