0

现在我有一个由 UL 组成的菜单，该菜单的内容是通过 Wordpress 后循环生成的。我找到了一个 jquery 脚本，当用户单击它们时，它可以在菜单项上切换活动/静态类。

这是我的菜单：

<div class="castmenu">
<ul>
<?php if ($new_query->have_posts()) : while ($new_query->have_posts()) : $new_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" target="biobox" class="static"><span class="castthumbnail"><?php the_post_thumbnail(); ?></span><span class="charactername"><?php the_title(); ?></span></a></li>
<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>
</div> <!-- end castmenu div -->

这是我现在运行的脚本：

<script type="text/javascript">
  $(document).ready(function () {
var sidenav = $('.castmenu');  
 sidenav.delegate('a.static','click',function(){
    sidenav.find('.active').toggleClass('active static');
    $(this).toggleClass('active static');
});
  });
</script>

基本上现在发生的事情是所有菜单的 li 标签在生成时都被设置为具有静态类，然后当有人单击其中一个菜单项时，上面的脚本将静态类切换为活动。这是我想做的第二部分。

对于第一部分，当页面加载时，我希望此菜单中的第一个 li 具有活动类，但对于我的生活，我无法选择它并在上面的脚本中设置类。当有人单击另一个菜单项时，也需要删除活动类（来自第一项）。

有什么我可以在上面的脚本中放入以在页面加载时定位该项目并仍然保持切换类单击的内容吗？

4

1 回答 1

1

You can chain jQuery's find after your delegation to select the first nav.

var sidenav = $('.castmenu');  
sidenav.delegate('a','click',function() {
        sidenav.find('.active').toggleClass('active static');
        $(this).toggleClass('active static');
    })
.find('a:first').addClass('active');

JSfiddle

A side note: $.on is preferred over $.delegate as jQuery 1.7.

Also, you could switch out your two calls to toggleClass by just calling removeClass on your .active items, and addClass on the clicked item.

于 2013-08-16T15:10:52.690 回答