Question

我有一个使用切换滑动的div。我希望用户能够点击在div中滑动的切换按钮然后如果他们在#hiddenpanel外部点击，则#hiddenpanel会滑出屏幕。

我目前使用切换进入和滑出div，我只需要在用户点击div外部时（一旦滑入），div滑回...

希望这有任何意义！

到目前为止，这是我的JQuery代码：

var speed = 800;
    $('#close-bar').on('click', function(){

        var $$ = $(this),
            panelWidth = $('#hiddenPanel').outerWidth();

        if( $$.is('.myButton') ){
            $('#hiddenPanel').animate({right:0}, speed);
            $$.removeClass('myButton')
        } else {
            $('#hiddenPanel').animate({right:-panelWidth}, speed);
            $$.addClass('myButton')
        }

    });

这是标记：

<div id="hiddenPanel" class="txt-highlight-color bg-color bg-pattern">
</div>

以下是网址：http://www.bboyrival.com/

切换是右下方的“个人资料信息”文字。

感谢您的时间。

Answer 1

在您的代码中尝试以下更改：

$("body").click(function(){
    $('#close-bar').removeClass('myButton');
    $('#hiddenPanel').animate({right:0}, speed);
})

var speed = 800;
$('#close-bar').on('click', function(event){

    event.stopPropagation();

    var $$ = $(this),
        panelWidth = $('#hiddenPanel').outerWidth();

    if( $$.is('.myButton') ){
        $('#hiddenPanel').animate({right:0}, speed);
        $$.removeClass('myButton')
    } else {
        $('#hiddenPanel').animate({right:-panelWidth}, speed);
        $$.addClass('myButton')
    }

});

这些变化的作用是：

向body添加一个click事件以关闭#hiddenPanel并从＃close-bar
并防止＃close-bar上的点击冒泡到正文。

您可以添加到正文点击事件，检查面板是否打开，如果不执行任何操作希望这有帮助

单击Div外部时滑动Div Back Out

1 个答案: