2013-04-07 67 views
0

我有人为我写了这个,并去了MIA,并无法弄清楚如何自己调整它。我对jQuery很陌生。这是用于使用<ul>的可扩展侧边栏导航,并且目前整个事情在点击时可扩展和收缩。jQuery点击功能ul菜单首先排除ul

我试图让第一个标题1 <ul>永久“展开”以显示链接1和链接2,但保持jQuery在标题2(以及3,4,5等)上工作。

我该如何永久保持第一个<ul>开放?非常感谢帮助!

<div class="sidebar"> 
<nav> 
<span class="heading">Title 1</span> 
<ul> 
<li><a href="/firstlink">Link 1</a></li> 
<li><a href="/firstlink">Link 2</a></li> 
</ul> 
</nav> 

<nav> 
<span class="heading">Title 2</span> 
<ul> 
<li><a href="/firstlink">Link 1</a></li> 
<li><a href="/firstlink">Link 2</a></li> 
</ul> 
</nav> 
</div> 

这是jQuery的位,使得它膨胀和收缩:

jQuery(window).load(function(){ 
jQuery('#body .sidebar nav').click(function(){ 
    var the_ul = jQuery('> ul', this); 
    if(the_ul){ 
     if (the_ul.css('display') == 'none') { 
      jQuery(the_ul).slideDown('500'); 
     } else { 
      jQuery(the_ul).slideUp('500'); 
     } 
    }; 
}); 
}); 

这是CSS:

.sidebar nav ul {display:none;} 

回答

0

试试这个(http://jsfiddle.net/v7JhL/1/)和删除CSS:

jQuery('#body .sidebar nav:gt(0)').click(function(){ 
    var the_ul = jQuery('> ul', this); 
    if(the_ul){ 
     if (the_ul.css('display') == 'none') { 
      jQuery(the_ul).slideDown('500'); 
     } else { 
      jQuery(the_ul).slideUp('500'); 
     } 
    }; 
}); 
jQuery('.sidebar nav > ul:gt(0)').hide() 
+0

谢谢。但其中的某些内容与网站上的其他内容相冲突并触发了多种警报弹出窗口。 – user2254449 2013-04-07 13:21:21

+0

对不起 - 我不得不在jsFiddle中将'#body'更改为body,并忘记将其改回:http://jsfiddle.net/v7JhL/2/也许这是问题所在。否则 - 警报弹出窗口中有什么? – mrks 2013-04-07 13:23:20

+0

这是一个Shopify错误,上面写着“收到我们想知道的所有信息'+ product.title” – user2254449 2013-04-07 13:31:12

1

我想这是你想要什么:

$('.sidebar nav ul:eq(0)').show(); 

$('.sidebar nav').click(function(){ 
    var the_ul = $(this).find("ul"); 

    if(the_ul){ 
     if (the_ul.css('display') == 'none') { 
      the_ul.slideDown('500'); 
     } else { 
      the_ul.slideUp('500'); 
     } 
    }; 
}); 

Working Demo

+0

我也这么认为。演示是完美的。但我试图用你的我的.js文件替换我目前的jQuery行(上面)似乎不工作。 – user2254449 2013-04-07 13:18:21