基于切换时删除/添加类

我有一列在click函数上向左滑动。然后，将该类的w添加到容器，以便在列滑出后更改其宽度。我试图做的是当它滑回时添加e的类，然后通过将它包装在toggle函数中删除w类，但容器仍包含w的类，并且不会添加类e 。思考？基于切换时删除/添加类

FIDDLE： http://jsfiddle.net/QDUQk/1926/

.container { 
    border: 1px solid #000; 
    width: 200px; 
} 

.container.e { 
    width: 80%; 
} 

.container.w { 
    width: 100%; 
} 

<div class="togl">Menu</div> 
<div class="col"> 
    SLIDE ME SLIDE ME PLX PLX 
</div> 
<div class="container"> 
</div> 

$('.togl').click(function() { 
    if ($('.container').is(':visible')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
});

来源

2016-11-12 coding_question

的.container能见度不从true改变。检查"w"className在.is()

$('.togl').click(function() { 
    if (!$('.container').is('.w')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
});

的jsfiddle http://jsfiddle.net/QDUQk/1927/

来源

2016-11-12 05:52:01 guest271314

@coding_question参见[：可见选择（https://api.jquery.com/visible-selector/）_“元素被认为是可见的，如果他们消耗在文档中的空间可见元素都有。宽度或高度大于零具有'visibility：hidden'或'opacity：0'的元素被视为可见的，因为它们仍占用布局中的空间。“_ http://jsfiddle.net/QDUQk/ 1928/ – guest271314

接受，谢谢。我会读一下关于.is的。 –

请考虑使用'hasClass（）'来代替 – RizkiDPrast

您的容器知名度不上单击更改。试试以下，

$('.togl').click(function() { 
    if ($('.container').hasClass('e')) { 
     $('.col').toggle('slide', { 
         direction: 'left' 
     }, 1000, function() { 
    $('.container').addClass('w'); 
    $('.container').removeClass('e'); 
    }); 
} else { 
$('.col').toggle('slide', { 
    direction: 'left' 
}, 1000, function() { 
    $(".container").removeClass('w'); 
    $(".container").addClass('e') 
}); 
}});

来源

2016-11-12 06:11:10 ScanQR

基于切换时删除/添加类

回答

相关问题