jquery 'this' confusion
Hi I have the code below, once the first (only) item in the menu is hovere开发者_Go百科d over, the subtext should appear. I have used 'this' as I thought it should find the class with the "li" and then slideDown. This doesnt seem to work, although 'this' works for when you remove the hover, as it slides up (top part not the subtext).
<body>
<script type="text/javascript">
$(document).ready(function()
{
$('li').hover(function()
{
$(this).stop(true, true).slideDown();
$(this).slideDown("slow");
},
function ()
{
$(this).slideUp("fast");
}
);
});
</script>
<ul>
<li class="hover">
<p><a href="#">Hover</a></p>
<p class="subtext">Show More</p>
</li>
</ul>
Any advice?
Thanks
added css:
ul
{
margin:0;
padding:0;
}
li
{
width:100px;
height:50px;
float:left;
color:191919;
text-align:center;
overflow:hidden;
}
a
{
color:FFF;
text-decoration:none;
}
p
{
padding:0px 5px;
}
.subtext
{
padding-top:15px;
background-color: #6AA63B;
}
.hover
{
background-color: #6AA63B;
}
When you use this you are referencing the element that the event was bound to. In this case the LI element. You want to hide and show the P element only. Like this.
HTML
<ul>
<li class="hover">
<p><a href="#">Hover</a></p>
<p class="subtext" style="display: none;">Show More</p>
</li>
</ul>
jQuery
$(document).ready(function() {
$('li').hover(function() {
$(this).children("p.subtext").slideDown("slow");
},
function() {
$(this).children("p.subtext").slideUp("fast");
});
});
I think this is what you're after:
$('li').hover(function() {
$(this).children('.subtext').stop(true, true).slideToggle();
});
If you want to hide/show the class="subtext" element, you need to find it within the <li> you're hovering over. This does that, and will slide down on hover, up on mouse out. In this example, this refers to the li DOM element, and $(this) refers to the li jQuery object.
Firstly you should put the order
jQuery.noConflict();
Then change $ with JQuery. Example:
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
Good links at this topic:
- http://docs.jquery.com/Using_jQuery_with_Other_Libraries
- http://api.jquery.com/jQuery.noConflict/
加载中,请稍侯......
精彩评论