我在div中包含无序列表,如下所示
<div id="menuwrapper">
<ul>
<li>home
<ul>
<li><a>anchor1</a></li>
<li><a>anchor2</a></li>
<li><a>anchor3</a></li>
</ul>
</li>
<li>school</li>
<li>college</li>
</ul>
</div>
我需要在家里悬停时找到每个锚点的宽度,即anchor1,anchor2,anchor3标签宽度。 我有以下代码似乎无法正常工作
$(function () {
$("#menuwrapper ul li").hover(function () {
var maxWidth = 0;
$(this).find("ul li a").each(function () {
if (this.width > maxWidth)
maxWidth = this.width;
});
$("#menuwrapper ul li ul li a").css("width", maxWidth);
});
});
感谢您的帮助
答案 0 :(得分:3)
$(function() {
var maxWidth = 0;
$("#menuwrapper ul li:first-child").hover(function() {
var $anchors = $(this).find("ul li a");
$anchors.each(function() {
if ($(this).width() > maxWidth) {
maxWidth = $(this).width();
}
});
$anchors.width(maxWidth);
});
});
答案 1 :(得分:1)
您的$this
应为$(this)
。或者您需要在范围内设置var $this = $(this);
。
答案 2 :(得分:1)
这是你的悬停和设置宽度
$(function () {
// First we detect and set the widths, then we hide the subMenu
var $maxWidth = 0,
$anchors = $("#menuwrapper ul li ul li a");
$anchors.each(function () {
var $this = $(this);
if ($this.width() > $maxWidth)
{
$maxWidth = $this.width();
}
});
$anchors.css('width', $maxWidth)
.closest('ul')
.hide();
// Then we add the hover actions
$("#menuwrapper ul li").hover(
function()
{
$(this).find("ul").slideDown();
},
function() {
$(this).find("ul").slideUp();
}
);
});
这可以更好地进行优化,但我认为这种方式最具说明性。