Question

你们是怎样的人？，我正在使用ul / li（ul / li）为一个幻灯片菜单做一个脚本，我的想法是在没有内部类的情况下使用slideup / down

我遇到的麻烦是点击我的ul（父亲）里面的链接（儿子）ul li a son's ul（ul li ul）get hide。如果您点击ul li a而不是在ul li ul li a中，那么这个想法就是这样做。我试着用“：first”，“。first {”“，”：first-child“。

希望可以让自己清楚。：d

这是代码：

HTML

    <ul id="menu"> 
       <li> 
           <a href="#">Menu 1</a> 
           <ul> 
                <li><a href="#">Sub Menu 1</a></li> 
                <li><a href="#">Sub Menu 2</a></li> 
                <li><a href="#">Sub Menu 3</a></li> 
            </ul> 
        </li> 
        <li> 
           <a href="#">Menu 2</a> 
           <ul> 
                <li><a href="#">Sub Menu 1</a></li> 
                <li><a href="#">Sub Menu 2</a></li> 
                <li><a href="#">Sub Menu 3</a></li> 
            </ul> 
        </li> 
        <li><a href="#">Menu 3</a></li> 
    </ul>

Javascript（Jquery）

    function submenu(id) { 
       var div = "#"+id; 
       $("ul"+div+" li a").each(function () { 
          $(this).click(function() { 
             var li = $(this).parent();       
             $("ul"+div+" li ul").each(function () {   $(this).slideUp("fast");   }); 
             if(li.children("ul").is(":visible")) {  
                li.children("ul").slideUp("fast"); 
             } else {  
                li.children("ul").slideDown("fast");  
             } 
             return false; 
          }); 
       }); 
    } 

    $(document).ready(function(){   submenu("menu");   }

由于

Answer 1

使用子css选择器（'ul。'+ div +'＆gt; li＆gt; a）或使用jQuery选择子项。

$(div).children(li).children(a).each(function() {
  /* your code here */
});

如你所知，你的第一个选择器正在抓住列表中的所有锚点。

Answer 2

如果我真的理解你的问题，我不会知道，但这里有一个jsfiddle： http://jsfiddle.net/BVVGX/

如果你点击一个孩子，没有任何反应，但如果你点击一个父亲，它会向上或向下滑动自己的孩子。

修改： http://jsfiddle.net/BVVGX/6/

关键是在slideDown之后添加一个回调，以便在slideDown期间隐藏其他已打开的菜单.Jquery并不真正知道ul是否可见。

Jquery - 幻灯片菜单（HandMade）

2 个答案: