Question

我正在使用jQuery创建导航菜单，我想要做的是根据我点击的项目更改整个菜单，菜单位于上方导航栏

例如

更新（当前第一项）
评论 - ＆gt;点击这个
的 MyReview
更改为：
评论（成为第一项）
的 MyReview
更新

意思是说想要创建一个循环菜单，为此我必须更改菜单项的id也是我用它作为参考，但没有得到如何更改此代码供我使用。

Dynamic menu items (change text on click)

我的代码是：

<script>
$(function(){
var menuList = [ "Update", "ReviewQueue", "MyReviewQueue"];
var m_length = menuList.length;

$("#menu ul li").click(function () { 
     //$('#menu ul li.active').removeClass('active');
     //$(this).addClass('active');
     $('.goMenu', this).text(this.id);

     $("#menu ul li").not(this).each(function(i) {
         $('.goMenu', this).text(menuList[i % m_length]);
     });
});
});
</script>


<title>My Review Queue</title>
</head>
<body>
<ul id="menu">
<li><a id="Update" class="goMenu" href="#">Update</a>
<ul>
<li><a id="ReviewQueue" class="goMenu" href="#">Review    Queue</a></li>
<li><a id="MyreviewQueue" class="goMenu" href="#">My review Queue</a></li>
</ul>
</li>
</ul>
</body>

的jsfiddle： http://jsfiddle.net/6zMqU/3/

Answer 1

您可以这样做：

<ul id="menu">
<li class="main-menu">
    <a id="Update" class="goMenu" href="#">Update</a>
    <ul>
    <li>
        <a id="ReviewQueue" class="goMenu" href="#" data-menu="review">Review    Queue</a>
     </li>
    <li>
        <a id="MyreviewQueue" class="goMenu" href="#">My review Queue</a>
        </li>
    </ul>
</li>
<li class="hide review">
    <a href="#">Review Queue</a>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</li>
</ul>

$(function(){
    $('.goMenu').on('click', function(e){
        $('.main-menu').addClass('hide');
        $this = $(e.currentTarget);

        clasz = $this.data('menu');

        $( '.' + clasz ).removeClass( 'hide');
    });
});

在这里小提琴：http://jsfiddle.net/6zMqU/

如何在jQuery中创建动态菜单

1 个答案: