我有一个带有页眉、页脚和左侧边栏的主模板。

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar(\'left\'); ?>
    <div class="middlebar">
        this is the main content
    </div>
</div>
<?php get_footer(); ?>

单击菜单的多个选项之一后，将加载页面模板，其中包含一个附加的右侧边栏。

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar(\'left\'); ?>

    <div class="middlebar">
        pagecontent
    </div>
    <?php get_sidebar(\'right\'); ?>
</div>

<?php get_footer(); ?>

我为这个侧边栏设置了动画，它在页面加载后滑入。

jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: \'0px\'});
});

我现在的问题是，每次单击其中一个菜单点都会播放动画。因此，单击链接后，侧边栏消失，只会再次出现。我希望当用户离开主模板并进入页面模板时（通过单击其中一个菜单点），动画只播放一次，而不是在不同页面之间切换时播放。

我的第一个想法是改变middlebar div 每点击一次。这样就不会重新加载整个页面模板，而只加载新内容并插入到div中。一个积极的副作用是需要加载的数据更少，但我无法阻止侧栏的多次加载。

我也试着做饼干，但都没用。

如何仅在第一次单击时加载侧栏，以便动画也只播放一次。

<?php is_front_page(){ ?>
<script>
jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: \'0px\'});
});
</script>
<?php } ?>

<script>
    if(!localStorage.getItem("animated")){ // check if the animated is set if not set do the animation
       jQuery(window).ready(function($){
        jQuery("#sidebarRight").animate({right: \'0px\'});
        localStorage.setItem("animated", "yes"); // after comleting the animation set the animated so that animation does not happen again
    });
}
    </script>