javascript - JQuery 和 CSS 之间的实时编辑桥梁

Question

我是 JavaScript 初学者。

我正在使用 bootstrap 来构建我自己的网站。我有一个包含信息的侧边栏。当 float 属性继续时，侧边栏应该从左到右灵活。

如果 float 在左侧，它将完美地位于左侧。右边的也是同样的情况。所以 CSS 或 HTMl 没有任何问题。

JavaScript 部分如下所示:

$(document).ready(function() {
$('#menu-toggle').on('click',function() {                   
        $('.sidebar').css({
            'float':'right'

        })
      });
var sidebarFloat = $('.sidebar').css('float');
$('.sidebar').hover(function () {
    if (sidebarFloat == 'left'){
     $(this).stop().animate({left:"0px"},500)
     var width = $(this).width() -10;
      $(this).stop().animate({left:- width  },500);
    alert("Float left");
 }
    else if (sidebarFloat == 'right'){
     $(this).stop().animate({right:"0px"},500)
     var width = $(this).width() -10;
      $(this).stop().animate({left:+ width  },500);
    alert("Float right");    
 }
   },function () {

});
});

应该在 float:left 或 float:right 之间切换的按钮

原来是float:left，按钮切换到float:right

当在常规侧“float:left”时，我将鼠标悬停，效果继续+发送一个消息框，说它在左侧。正如我在警报中所写

该按钮更改浏览器预览中的 CSS。所以在预览中，它是 float:right

但是，当我在更改 float 后将鼠标悬停时，它会在消息框中显示 float 。这意味着它从 CSS 文件读取，而不是从浏览器中的实时部分读取。我不知道如何解释它，但这是我到目前为止发现的，不知道它是对还是错

因此，由于无法读取语句:-“else if (sidebarFloat == 'right')”，因此没有任何更改，因为对于 javascript 端，它始终是 float:left。

Answer 1

这是因为您的变量 sidebarFloat 是在页面加载时读取的，并且您从未在代码中更改此变量的值，因此它始终保留。

当您将鼠标悬停在侧边栏上时，您必须更改变量的值。

$('.sidebar').hover(function () {
  sidebarFloat = $(this).css('float');
  if (sidebarFloat == 'left') {
    $(this).stop().animate({left:"0px"},500)
    var width = $(this).width() -10;
    $(this).stop().animate({left:- width  },500);
    alert("Float left");
  } else if (sidebarFloat == 'right') {
    $(this).stop().animate({right:"0px"},500)
    var width = $(this).width() -10;
    $(this).stop().animate({left:+ width  },500);
    alert("Float right");    
}