Question

我是jquery的新手，想要自己学习。我有红框使用红框内的复选框。

我喜欢的是，当取消选中加载页面时，如果用户想要滑动所有必须做的是自动红框滑出，则将鼠标悬停在红色框中。

我还有一个关闭自动滑出的复选框，另一个单词意味着保持视图不滑出。

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

查看代码......

<!--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
})

其次，您在=

的ID上遗漏了mycheckbox

第三，为了设置css的right属性，首先需要设置position

这是您的更新代码，似乎在这个小提琴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

1 个答案: