Question

我有一个左侧边栏，当鼠标离开它时我需要隐藏它。

此刻，当我将鼠标移开它时，它已被删除。但是，当我将鼠标从其+100像素向右移开时，我需要将其删除，但是我不想为其宽度增加100像素。我希望所有这些都只保留在js代码中，而不反映在HTML内部。

我试图这样做：$(".group-side-context").offset().right + 100px

if($(".group-side-context").mouseover){
  $(".group-side-context").mouseleave(function(){
    $(this).parent().removeClass("context-sidebar-active").addClass("context-sidebar-close").removeClass("context-sidebar-close").addClass("context-sidebar");
  })
};

Answer 1

我想您想隐藏左侧边栏。如果是这种情况，您可以尝试结合使用从左侧淡入淡出在jQuery中隐藏/显示。

我希望以下代码可以帮助您解决问题。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
  //$("div.sidenav").addEventListener("mouseleave", printPosition);
  document.getElementById('mySidenav').addEventListener('click', printPosition);
  function printPosition(e) {
    var position = getPosition(e);
    var x = position.x;
    var y = position.y;
    console.log(x,y);
  };

  function getPosition(e) {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    return {
      x,
      y
    }
  }

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

$("div.sidenav").mouseleave(function () {
  console.log("You've left the sidebar");
  let width = $(this).width();
  console.log("Width of the sidebar: " + width);
  $(document).mousemove(function () {
    let pos = mousePositionDocument();
    if (pos.x - width >= 200) {
      closeNav();
    }
    //console.log(pos.x, pos.y);
  });
});


  // Which HTML element is the target of the event
  function mouseTarget(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
      targ = targ.parentNode;
    return targ;
  }

  // Mouse position relative to the document
  // From http://www.quirksmode.org/js/events_properties.html
  function mousePositionDocument(e) {
    var posx = 0;
    var posy = 0;
    if (!e) {
      var e = window.event;
    }
    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {
      x : posx,
      y : posy
    };
  }

  // Find out where an element is on the page
  // From http://www.quirksmode.org/js/findpos.html
  function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
    }
    return {
      left : curleft,
      top : curtop
    };
  }

  // Mouse position relative to the element
  // not working on IE7 and below
  function mousePositionElement(e) {
    var mousePosDoc = mousePositionDocument(e);
    var target = mouseTarget(e);
    var targetPos = findPos(target);
    var posx = mousePosDoc.x - targetPos.left;
    var posy = mousePosDoc.y - targetPos.top;
    return {
      x : posx,
      y : posy
    };
  }

</script>

</body>

如何在代码中为元素设置更大的尺寸

1 个答案: