我有一个简单的列表,当我滚动li选择器时,我想在具有一类子文本的滚动范围内找到p标记的原始高度。我想把这个值存储在某个地方,这样我就可以在卷展栏方法中使用它。有没有办法把它存储在这个范围内。如果我使用一个全局变量,它可能会在前一个使用它之前被另一个滚动范围更改
我还想知道如何获得选择器文本高度的正确高度。var pheight=$(this,"p.subtext").height();上面的代码并没有阅读全文。它似乎正在读取li标记的高度,在css中该标记被设置为height:50px;
li{
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
list-style-type: none;
}
HTML代码
<body>
<ul>
<li class="green">
<div ></div>
<p><a href="#">Home</a></p>
<p class="subtext">The front page has more text than any other panel. I want the script to revel different height text.</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal stuff</p>
</li>
</ul>
$("document").ready(function(){
$("li").mouseover(function(){
var pheight = $(this, "p.subtext").height();
console.log(pheight);
$(this).stop().animate({height:150}, {duration: 600, easing: "easeOutExpo"} );
})
$("li").mouseout(function(){
$(this).stop().animate({height:50}, {duration: 600, easing: "easeOutExpo"} );
})
})
首先,您需要反过来使用选择器——$('p.subtext', this)
。更明显的是,使用find
:
var pheight = $(this).find('p.subtext').height();
然后,您可以使用data
:将数据存储在元素本身上
$(this).data('pheight', pheight);
您可以再次使用data
在mouseout
功能中检索:
$(this).stop().animate({height: $(this).data('pheight')}, {duration: 600, easing: "easeOutExpo"} );