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 タグが生成時に静的クラスを持つように設定されていることです。次に、上記のスクリプトは、誰かがメニュー項目の 1 つをクリックすると、静的クラスをアクティブに切り替えます。これは、私がやろうとしていることの 2 番目の部分です。

最初の部分では、ページが読み込まれるときに、このメニューの最初の li にアクティブなクラスを持たせたいと思っていましたが、私の人生では、それを選択して上記のスクリプトでクラスを設定することはできません。アクティブなクラス (この最初の項目から) も、誰かが別のメニュー項目をクリックしたときに削除する必要があります。

上記のスクリプトに、ページの読み込み時にそのアイテムをターゲットにし、クリック時にトグル クラスを維持するために何かを入れることはできますか?

4

1 に答える 1

1

委譲の後にjQuery の検索をチェーンして、最初のナビゲーションを選択できます。

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

JSフィドル

補足: $.onは、jQuery 1.7 として $.delegate よりも優先されます。

toggleClassまた、.active アイテムを呼び出すだけで2 つの呼び出しを切り替えることができremoveClass、クリックしたアイテムで addClass を呼び出すことができます。

于 2013-08-16T15:10:52.690 に答える