Question

我想转换这个插件 http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin 到我的网站的侧面菜单。我需要配置的唯一部分是在单击第二个面板时关闭打开的面板，因此一次只打开一个面板。

我找到了这段代码，但它在my page中表现得很奇怪 - 打开关闭然后再次打开 -

    <script>
$(document).ready(function () {
    $(".trigger").click(function () {
        var $clicked = $(this);
        $('.trigger.active').each(function () {
            var $link = $(this);
            // If this is not the clicked link, collapse its panel
            if (!$link.is($clicked)) {
                $($link.attr('data-target')).slideUp("slow");
                $link.removeClass("active");
            }
        });
        $clicked.toggleClass("active");
        if ($clicked.hasClass("active")) {
            $($clicked.attr('data-target')).slideDown("slow");
        } else {
            $($clicked.attr('data-target')).slideUp("slow");
        }
        return false;
    });

    if (!panel.is(':visible')) {
        $('.panel').hide(opts.speed);
        $('.trigger').removeClass('active');
    }
});</script>

这是我的页面源代码：

<script type="text/javascript">
$(document).ready(function(){
    // $('.panel').slidePanel();

    $('#panel1').slidePanel({
        triggerName: '#trigger1',
        position: 'fixed',
        triggerTopPos: '20px',
        panelTopPos: '10px'
    });

    $('#panel2').slidePanel({
        triggerName: '#trigger2',
        position: 'fixed',
        triggerTopPos: '60px',
        panelTopPos: '60px'
    });
</script>
<a href="#" id="trigger1" class="trigger left" data-target="#panel1">panel</a>
    <div id="panel1" class="panel left">
        ...
    </div>
    <a href="#" id="trigger2" class="trigger left" data-target="#panel2">panel</a>
    <div id="panel2" class="panel left">
        <p>Nullam at odio nibh, eu pharetra ipsum.</p>
    </div>

    <a href="#" id="trigger3" class="trigger right" data-target="#panel3">panel</a>
    <div id="panel3" class="panel right">
        <p>enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum.</p>
    </div>

我知道这听起来很简单，已经有很多关于这个插件的文章，但是我的知识让我失望了。任何帮助将不胜感激

Answer 1

由于该插件还添加了自己的侦听器，因此您的代码与默认动画相冲突。

试试这个：

$(".trigger").click(function () {
    $('.trigger.active').not($(this)).each(function () {
        $($(this).attr('data-target')).slideUp('slow');
        $(this).removeClass('active');
    });
});

单击另一个时，JQuery滑动面板关闭

1 个答案: