Question

我是javascript的初学者。

我正在使用bootstrap来构建我自己的网站。我有一个包含信息的侧边栏。当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

之间切换的按钮

它最初是浮动的：左边，按钮切换到浮动：右边

当在常规方面＆＃39; float：left＆＃39;时，我将鼠标悬停并且效果继续+发送一个消息框，说明它在左边。正如我在警报中写的那样

该按钮可更改浏览器预览中的CSS。所以在预览中，它是浮动的：正确的

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

因此，由于无法阅读声明，所以没有任何改变： - ＆＃34;否则如果（sidebarFloat ==＆＃39; right＆＃39;）＆＃34;因为在javascript方面，它总是浮动：左。

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

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

1 个答案: