Question

我有一个无序的列表，像这样：

menu 1

menu 2

menu 3

menu 4

→

当我点击包含箭头的上一个li时，下一个li应该一个接一个地出现。

菜单1→ 菜单1菜单2→ 菜单1菜单2菜单3→ 我的jQuery cod是：

$(document).ready(function(){
  $('.nav li:first, .nav li:last').css('display','inline-block');
  $('.nav .arrow').click(function(){
    var current = $('.nav li').first();
    if($(current).is(':visible')){
      current.next().css('display','inline-block');
    }
  });
});

Answer 1

$(document).ready(function(){ 
    $('.nav li:last').css('display','inline-block');
    $('.nav .arrow').click(function(){
        $(this).prevAll("ul li").css("display", "inline-block");
    }); 
});

JS小提琴： http://jsfiddle.net/6BU4E/1/

Answer 2

我已为此

创建了示例代码

    <script>
    $(document).ready(function () {
        $("#arrow").click(function () {
            var count = $(".menuList").length;
            var newItem = $('<li/>', { "class": "menuList", html: "menu" + count + 1 });
            $("#menu").append(newItem);

        });
    });


</script>

<body>
<ul id="menu">
    <li class="menuList">menu1</li>
</ul>
<span id="arrow">-></span>
</body>

如何在无序列表中显示下一个列表项

2 个答案: