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

Question

我是 javascript 的初学者。

我正在使用引导程序来构建自己的网站。我有一个包含信息的侧边栏。随着浮动属性的继续，侧边栏应该从左侧或右侧灵活。

如果浮动在左边，它将完全在左侧。对的也一样。所以在 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

但是，当我在更改浮动后悬停时，它会在消息框中显示浮动。这意味着它从 CSS 文件中读取，而不是从浏览器中的活动部分中读取。 IDK如何解释它，但这是我迄今为止发现的，IDK是对还是错

因此，由于它无法读取语句，因此没有任何更改：-“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");    
}