文章/答案/技术大牛

发布

社区首页 >问答首页 >在Div外部单击时将Div滑回

问在Div外部单击时将Div滑回
EN

Stack Overflow用户

提问于 2014-02-18 21:26:21

回答 1查看 181关注 0票数 0

我有一个使用切换的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/

切换是右下角的“配置文件信息”文本。

耽误您时间，实在对不起。

jquery

回答 1

Stack Overflow用户

发布于 2014-02-18 22:30:18

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

$("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
中删除类'myButton‘，并阻止单击#close-bar使其冒泡到body。

您可以向body click事件添加一个检查，以查看面板是否打开，如果没有，则什么也不做希望这会有所帮助

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21855266

复制

相似问题

问在Div外部单击时将Div滑回
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Div外部单击时将Div滑回EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Div外部单击时将Div滑回
EN