Question

现在我有一个由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拥有活动类，但是对于我的生活，我无法选择它并在上面的脚本中设置类。当有人点击另一个菜单项时，还需要删除活动类（来自此第一项）。

我是否可以在上面的脚本中添加任何内容以在页面加载时定位该项目并仍然保持点击的切换类？

Answer 1

您可以在代表团选择第一个导航后链接jQuery的find。

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

JSfiddle

附注：$.on优于$ .delegate作为jQuery 1.7。

此外，您可以通过只调用.active项目上的toggleClass和点击项目上的addClass来切换对removeClass的两次调用。

jQuery菜单将第一个子项设置为活动状态，单击时切换类

1 个答案: