Finding a JQuery Accordion within 2 Divs
I had this question before but I may not have asked it correctly the first time, so here is my second attempt. I am creating a site with dynamic web pages. On one of these pages I have 3 accordions underneath a table, but surrounded in a Div called "wrapping". In order to have these accordions seen as part of the dynamic page, I am including them within a Div I called "content" (as both ID name and class name for testing purposes).
Here is the HTML section for the dynamic content containing these accordions:
<body>
<form id="form1" runat="server" >
<div id="content" class="content">
<table style="width: 1200px">
<tr>
<td style="width: 800px">
<h1>Title</h1><br />
blah blah
</td>
</tr>
</table>
<div id="wrapping" class="wrapping">
<p class="accordionButton"><strong>Service 1</strong></p>
<div class="accordionContent">
Item1<br />
Item2<br/>
</div>
<p class="accordionButton"><strong>Service 2</strong></p>
<div class="accordionContent">
Item1<br />
Item2<br />
</div>
<p class="accordionButton"><strong>Service 3</strong></p>
<div class="accordionContent">
Item1<br />
</div>
</div>
</div>
</form>
</body>
Here is the entire relevant Jquery code segment I'm using:
$(document).ready(function() {
$('.wrapping').find('p.accordionButton').each(function()
{ alert("found it") }); //Test
//ACCORDION BUTTON ACTION
$('.wrapping').find('p.accordionButton').mouseover(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
//HIDE THE DIVS ON PAGE LOAD
$(".accordionContent").hide();
});
Here is the CSS associated with the program, including some styles that do not apply for this example:
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
开发者_StackOverflow中文版 width: 43px;
height: 11px;
text-indent: -9999em;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu li a
{
float: none
}
#nav-menu
{
width:30em
}
.accordionButton
{
width: 650px;
float: left;
background: #99CC99;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
text-align: center;
}
.accordionContent {
width: 650px;
float: left;
background: #95B1CE;
display: none;
}
Question: I can find each of the accordion buttons on the page by the test statement above (I get 3 alerts, one for each accordionButton), but can't do a mouseover using the same method. Why is that?
I had a look at your previous question and there is information there that is not in this post. It looks like you are using jQuery's .load() function to populate <div id="content" />. If you are then you need to use a live binding rather than a standard bind function.
.mouseover(function()) is short hand for .bind(mouseover,function()) and this will not work with content loaded after the DOM is initially generated. Instead you should use .live(mouseover,function()) which will included any content added to the DOM by a .load() function. Here is more information on live binding: jQuery's .live() handler
In addition to this you should (as mentioned by others) use mouseenter instead of mouseover because the latter will fire when you hover over any element with the one you specify, whereas the latter only fires once per element or children. I have explained it badly - here is a link for better information and an interactive example: jQuery's mouseenter event
I hope this helps!
mouseover can be very quirky it is advised to use mouseenter
I'm not sure what your asking, but you can surely use a little tweak to your mouseover function.
$('.wrapping').find('p.accordionButton').mouseover(function() {
if($(this).next().is(':hidden')){
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
}
});
This will improve the accordion usability, e.g. only switching view pane when intended.
Or.. perhaps try this modification:
$('.wrapping').find('p.accordionButton').each(function() {
$(this).mouseover(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
});
I solved this issue by removing the code that enabled dynamic pages. That simplified the code and removed a level of complexity.
The code shown above works, and I even made it fancier. If you are curious about it, check out my test site.
加载中,请稍侯......
精彩评论