如何在复选框中滑出

Question

我有 div 框在加载页面时滑出，当鼠标悬停或悬停时它会滑入，工作正常。

现在我正在尝试添加新功能，有一个复选框如果选中并且不会滑出或禁用滑出。如果不检查，则自动滑出以便启用。

如您所见，id="checkbox" ...为什么不起作用！

HTML

<div class="sidebar-nav-right">                            
<ul class="nav nav-list accordion-group latest-group-sidebar">
<input name="" type="checkbox" id="mycheckbox" value="">                           
</ul>
</div>

jquery...

$(window).on("load", function() {    $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" ); });

$(".sidebar-nav-right").hover(function () {
    $(".sidebar-nav-right").animate({ "right": "0px" }, "fast" ); }, function(){
     $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" ); });

$("#mycheckbox").on('change', function () {
    $(".sidebar-nav-right").toggleClass("sidebar-nav-right"); });

Answer 1

您使用的 toggleClass 有误。 toggleClass 就是用来切换 class 的。

http://api.jquery.com/toggleclass/

但您只使用了一个 class。最简单的方法是为关闭状态和打开状态编写 CSS 动画 CSS。然后使用 toggleClass 在单击时添加和删除 class。

如何在复选框中滑出

how to slideout in checkbox

jquery

onload

slide