Question

我尝试将左侧菜单向右滑动打开时调暗背景。

首次运行时，当调光器代码被注释掉时，它会向左滑动，在第二次点击后它的工作正常。如果包含调光器代码，则不会删除class='dimmer'，我无法再次点击。

这是jQuery：

jQuery(document).ready( function(){
jQuery(".x-btn-navbar").click(function(){

    //if (jQuery('#dimmer').hasClass('dimmer')){
        //jQuery('#dimmer').removeClass('dimmer');
    //} else {
        //jQuery('#dimmer').addClass('dimmer');
    //}
    jQuery('.nav-animate').fadeIn(500);
    jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);

});
});

感谢您的帮助，感谢您的帮助。

Answer 1

也许这会对你有所帮助：

jQuery('.nav-animate nav').css({
    opacity: 0,
    left: -$('.nav-animate nav').outerWidth()
});
jQuery(".x-btn-navbar").click(function () {
    if (jQuery('#dimmer').hasClass('dimmer')) {
        jQuery('#dimmer').removeClass('dimmer');
        jQuery('.nav-animate nav').animate({
            opacity: 0,
            left: -$('.nav-animate nav').outerWidth()
        }, 500);
    } else {
        jQuery('#dimmer').addClass('dimmer');
        jQuery('.nav-animate nav').animate({
            opacity: 1,
            left: $('.x-btn-navbar').outerWidth()
        }, 500);
    }
});

JSFiddle演示：http://jsfiddle.net/kq5vo508/2/

Answer 2

我希望我的问题是正确的，但是从您附加的链接看来，您第一次点击菜单按钮时会出现问题，之后会混淆调光器状态。

在您的HTML中，您有导航部分

<section class="nav-animate">
    <nav style="height:auto;" class="x-nav-wrap mobile cbp-spmenu cbp-spmenu-vertical cbp-spmenu-push">

并且您的css设置.nav-animate未显示，请尝试删除该设置，而是将内部导航标记设置为display:none;

jQuery从左边+暗淡背景滑动

2 个答案: