gpt4 book ai didi

jquery - 检测 CSS 下拉菜单是否靠近浏览器边缘并更改对齐方式 - 流体宽度

转载 作者:行者123 更新时间:2023-11-28 18:57:45 25 4
gpt4 key购买 nike

我目前有一个纯 CSS 下拉菜单/大型菜单,效果很好。布局是流动的(基于百分比),我也在使用媒体查询。

我遇到的问题是我需要检测菜单项 li 是否靠近浏览器边缘并使用 CSS 更改 align 属性。

我猜我需要使用 jQuery 来实现这一点,但我真的不知道该怎么做。

最佳答案

看看这个。它可能不优雅,但如果 li 靠近左侧或顶部,它会变成粉红色。您应该能够完成拼图:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>

<style type="text/css">
ul{
list-style:none;
}
li{
display:inline-block;
margin: 5px;
width: 100px;
height: 100px;
background-color:silver;
}
</style>

</head>

<body>
<ul>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="application/javascript">
$(document).ready(function(){
var items = new Array();
var i;

function paintPink(){
$('ul > li').css('background-color','silver');
for (i=1;i<=$('ul').children().length;i++){
if ((($('ul > li:nth-child(' + i + ')').offset().left) < 60) || (($('ul > li:nth-child(' + i + ')').offset().top) < 60)){
$('ul > li:nth-child(' + i + ')').css('background-color','fuchsia');
};
};
};

$(window).load(paintPink);
$(window).resize(paintPink);

});
</script>
</body>

</html>

祝你好运。

关于jquery - 检测 CSS 下拉菜单是否靠近浏览器边缘并更改对齐方式 - 流体宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7256166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com