javascript - 如何为代码中的元素设置更大的尺寸
问题描述
我有一个左侧边栏,当鼠标离开它时我需要隐藏它。
目前,当我将鼠标移开时,它会被移除。但是,当我将鼠标从它向右移 +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");
})
};
解决方案
我猜你想隐藏左侧边栏。如果是这种情况,您可以尝试在 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()">×</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()">☰ 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>
推荐阅读
- mysql - 如何更新 3 个表 1 个查询
- git - 将 reflog 重置为当前 HEAD 位置的最快方法?
- gridsearchcv - GridSearchCV 找到最佳正则化参数:如何访问验证分数和训练分数
- flutter - Streambuilder 中的 Listviewer 无法正确更新已删除的对象
- django - 如何使用 Django 列表视图遍历 Chart.js
- google-cloud-platform - Google Compute Engine 上 V100 和 P100 的可用性
- flutter - 无法初始化 Firebase 颤振
- javascript - 更改 jquery-ui 日历中的日期格式
- python - 如何在熊猫数据框中跨多行搜索文本?
- python-3.x - 通过python从GCP存储桶中读取excel