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

Live editing bridge between JQuery and CSS

本文关键字：编辑 实时 CSS 之间 JQuery      更新时间：2023-09-26

我是javascript的初学者。

我正在使用引导来构建自己的网站。我有一个包含信息的侧边栏。随着 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"中时，我悬停并且效果继续+发送一个消息框说它在左侧。 正如我在警报中所写

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

但是，当我在更改浮点

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

因此，由于它无法读取语句：- "else if （sidebarFloat == 'right'）"，没有任何变化，因为在javascript方面，它总是float：left。

这是因为您的变量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");    
}
相关文章：