Question

我在jquery中编写了一个手风琴，它工作得很好但是在关闭之前打开的部分时我会反弹。

我尝试设置一个活动类并检查它，但将其撕掉以避免头疼。

我的Jquery：

var $runAccordionOnce = 0; var $accordionPrev;

$(document).ready(function(){
    $(".sidebar_game_header").click(function(){
                  if($runAccordionOnce > 0) {

                  $accordionPrev.slideUp('normal');
                  $accordionPrev.prev().css({'background-position' : 'top left'});

                  }

                  $accordionPrev = $(this).next();
                  $(this).next().slideDown('normal');   
                  $(this).css({'background-position' : 'bottom left'});
                  $runAccordionOnce++;            
    });
    });

我的html示例，每个游戏部分都遵循以下布局：

<div class="sidebar_game_header"><div class="sidebar_game_header_text">Original Titles</div></div>
    <div class="sidebar_game_content">          
    <ul>
        <li><a href="<?php {echo $url . "&amp;game_id=9";} ?>">Game 1</a></li>
            <li><a href="<?php {echo $url . "&amp;game_id=10";} ?>">Game 2</a></li>
            <li><a href="<?php {echo $url . "&amp;game_id=8";} ?>">Game 3</a></li>
    </ul>
    </div>
</div>

问题似乎是在点击已经打开的部分标题后，它会向上滑动，然后再次向下滑动。其余的工作，点击不同的部分将关闭以前打开的部分。

这让我疯狂了一段时间。有什么提示吗？

谢谢！

Answer 1

我相信这应该做到。基本上只有在隐藏时才尝试重新显示该部分。当你点击已经打开过的那个时，我并不完全确定你想要发生什么。以下代码将隐藏它。

$(document).ready(function(){
    $(".sidebar_game_header").click(function(){
                  if($runAccordionOnce > 0) {

                  $accordionPrev.slideUp('normal');
                  $accordionPrev.prev().css({'background-position' : 'top left'});

                  }


        if($(this).next().is(":hidden")){
                  $accordionPrev = $(this).next();
                  $(this).next().slideDown('normal');   
                  $(this).css({'background-position' : 'bottom left'});
                  $runAccordionOnce++;    
        }        
    });
    });

如果您不想隐藏它，那么只需在最开始检查您点击的那个是$ accordionPrev中的那个并且不要隐藏它。

var $runAccordionOnce = 0;
var $accordionPrev;

$(document).ready(function() {
    $(".sidebar_game_header").click(function() {
        if ($runAccordionOnce > 0) {

            if ($(this).next()[0] == $accordionPrev[0]) return;

            $accordionPrev.slideUp('normal');
            $accordionPrev.prev().css({
                'background-position': 'top left'
            });

        }


        $accordionPrev = $(this).next();
        $(this).next().slideDown('normal');
        $(this).css({
            'background-position': 'bottom left'
        });
        $runAccordionOnce++;

    });
});

Jquery手风琴在上一节结束后反弹

1 个答案: