jquery 中的复选框自动滑出

Question

我是jquery的菜鸟，想自学。我在红色框内使用了带有复选框的红色框。

我喜欢的是，当加载页面时取消选中，如果用户想要滑入，红框会自动滑出，只需将鼠标悬停在滑入的红框上即可。

我还有一个用于关闭自动滑出的复选框，换句话说就是保持视图不滑出。

我已经编写了代码但无法正常工作，我想它必须合并两个 jquery 用于（滑出和复选框）...我需要帮助才能同时拥有自动滑出或滑入复选框，如果选中复选框然后关闭自动滑出或滑入。

查看代码...

<!--auto hide and show right sidebar-->   

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

$(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" );
});


<!--checkbox -->

$('#mycheckbox').change(function(){
  if($(this).prop("checked")) {
    $(".sidebar-nav-right").addClass("sidebar-nav-rightb");
    $(".ui-sortable").css("width", "1320px");
  } else {
    $(".sidebar-nav-right").removeClass("sidebar-nav-rightb");
     $(".ui-sortable").css("width", "100%");
  }
});

<div class="sidebar-nav-right">

<div><input type="checkbox" id"mycheckbox">checkbox</div>

right sidebar

</div>

Answer 1

为此，您需要解决几件事。首先，您需要将 jQuery 包裹在

中

$(document).ready(function(){
//your code goes here
})

其次，您在 mycheckbox

的 ID 上缺少一个 =

三、要设置css的right属性，首先需要设置position

这是您更新后的代码，似乎可以在 fiddle https://jsfiddle.net/yp43vnxz/16/ 中使用，它至少会让您朝着正确的方向迈进

$(document).ready(function(){
$(".sidebar-nav-right").animate({ "right": "-50" }, "slow" );

$('#mycheckbox').change(function(){
  if($(this).prop("checked")) {
    $(".sidebar-nav-right").addClass("sidebar-nav-rightb");
        $(".ui-sortable").css("width", "1320px");
  } else {
    $(".sidebar-nav-right").removeClass("sidebar-nav-rightb");
      $(".ui-sortable").css("width", "100%");
  }
});

$(".sidebar-nav-right").hover(function () {
        if(!$('#mycheckbox').prop("checked")) {
      $(".sidebar-nav-right").animate({ "right": "10px" }, "fast" );
     } 

}, function(){
        if(!$('#mycheckbox').prop("checked")) {
     $(".sidebar-nav-right").animate({ "right": "-=115px" }, "fast" );
    }
});

})

jquery 中的复选框自动滑出

auto slide out with checkbox in jquery

checkbox

jquery

slide