到目前为止,你们一直非常乐于助人,让我这样小小的工作。我还有一个要求:
此标记:
<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下的其中一个链接时,悬停会缩回slideUp / down。当有人徘徊嵌套的李时,我希望它能够保持滑行状态。因此幻灯片只应在悬停时才能进行tier_1元素。此外,我想在悬停时向tier_1链接上的元素添加“活动”类。所以[a class =“enviro”..]会在悬停时成为[a class =“enviro active”]。当其他tier_1项之一悬停时,将删除此项。这样,当有人看到嵌套元素时,漂亮的颜色图标可以保持可见。
甚至不确定悬停时的所有可能性,但我想如果有人知道它会在这里的方式。
答案 0 :(得分:1)
我想你可能希望在你的主题DIV上有一个mouseout
处理程序,它会滑动所有嵌套的uls和一个mouseover
处理程序,每个tier_1
锚点关闭另一个嵌套的uls和幻灯片打开它的嵌套ul。这样,当您切换到不同的面板或完全脱离thems div时,您只能关闭面板。如果您希望在主题DIV中保留选中的最后一个选项,则可以省略mouseout
。
$(function(){
$('div.themes').mouseout(function() {
$('.tier_2:visible').slideUp();
$(this).find('a.active').removeClass('active');
});
$(".tier_1 > a").mouseover(function() {
var $this = $(this);
$this.closest('div').find('a.active').not($this).removeClass('active');
$this.addClass('active');
var currentList = $this.parents('li').find('.tier_2');
$(currentList).not(':visible').slideDown();
$('.tier_2:visible').not(currentList).slideUp();
return false;
});
});