JQuery导航ul树

时间:2011-02-19 13:40:55

标签: jquery

这与我的last question相关,但不相同。所以我认为开始一个新线程是有道理的。我正在使用JQuery在我的网站上创建导航结构。此结构由以下代码定义:

<ul id="theMenu"> 
  <li><a title="" href="#"><img alt="Home" src="/dot.png" class="menuHeader" />Home</a></li>
  <li><a title="" href="#"><img alt="About" src="/dot.png" class="menuHeader" />About</a> 
    <ul> 
      <li><a href="#"><img alt="Our Team" src="/dot.png" class="subMenuHeader" />Our Team</a></li> 
      <li><a href="#"><img alt="Our Company" src="/dot.png" class="subMenuHeader" />Our Process</a></li> 
    </ul> 
  </li> 
  <li><a title="" href="#"><img alt="Catalog" src="/dot.png" class="menuHeader" />Catalog</a> 
    <ul> 
     <li><a href="#"><img alt="" src="/dot.png" class="subMenuHeader" />Men's Clothing</a></li>  
     <li><a href="#"><img alt="" src="/dot.png" class="subMenuHeader" />Women's Cloting</a></li> 
  <li><a href="#"><img alt="" src="/dot.png" class="subMenuHeader" />Kids Clothing</a></li> 
  </ul> 
  </li> 
  <li><a title="Contact Us" href="#" class="btm"><img alt="Contact Us" src="/dot.png" class="menuHeader" />Contact Us</a></li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
    $("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
    $("#theMenu > li > a").click(function () {
      $(this).find("+ ul").slideToggle("fast");
    });
  });
</script>

目前,我在所有不是第一个元素的元素上调用“slideUp”。除了一个之外,我有没有办法在所有这些上调用slideUp?目前,我在加载时具有父元素的名称。例如,当我到达“$(”#theMenu&gt; li&gt; a“)的行时,不是(”:first“)。find(”+ ul“)。slideUp(1);”,I可能知道“目录”列表应保持打开状态。有没有办法做到这一点?有没有办法让我循环浏览我的项目然后说“如果我旁边的图像没有'目录'的'Alt',那么滑动?我知道这似乎是一个奇怪的问题。但我的用户界面是生涩的没有这种方法。

非常感谢你的帮助!

谢谢!

1 个答案:

答案 0 :(得分:0)

编辑版:

$("#theMenu > li > a").each(function()
{
    var item = $(this);
    if($(this).find('img').attr('alt') != "Catalog")
    {
        $(this).siblings("ul").slideUp(1);
    }
});

试试。