JQuery Accordion Buried in a Table within Dynamic Page
I'm trying to access the Moveover property of an Accordion buried under Divs and other stuff. Here is the HTML:
<body>
<form id="form1" runat="server" >
<div id="content" class="content">
<table style="width: 1200px">
<tr>
<td style="width: 800px">
<h1>Title here</h1><br />
stuff here.. blah blah..
<div id="wrapping" class="wrapping">
<p class="accordionButton"><strong>Water-Related Services</strong></p>
<div class="accordionContent">
Item 1<br />
Item 2<br/>
Item 3<br />
</div>
<p class="accordionButton"><strong>Fire and Smoke Problem</strong></p>
<div class="accordionContent">
Item 1<br />
Item 2<br />
Item 3<br />
</div>
<p class="accordionButton"><strong>Mold Problems</strong></p>
<div class="accordionContent">
Mold Remediation<br />
</div>
</div>
</td>
<td style="width:auto; text-align:center">
<p style="text-align:center; font-size:xx-large; color:Red">CALL TODAY</p><br />
</td>
</tr>
</table>
</div>
Here is the portion of the script I'm using to TRY to access the Accordion buttons:
$('.wrapping').find('p.accordionButton').mouseover(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
I've placed an ALERT command inside the Mouseover function and it never fires, so I know I'm not reaching the Accordion button properly. Can anyone help?
Added: Here is the entire JQuery script. It's not big, but it's redundant. I have this ASP.NET page as a dynamic web page. I know I have redundancies, but I'm new at JQuery:
// Check for hash value in URL
var hash = window.location.hash.substr(1);var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash + '.htm #content';
$('#content').load(toLoad)
}
});
$(document).ready(function() {
//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();
if (hash=="") {
$('#content').load("welcome.aspx #content", showNewContent());
}
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show(hideLoader());
}
开发者_StackOverflow function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show(hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
});
You can try to eliminate this ambiguity:
<div id="wrapping" class="wrapping">
I suggest you to remove the class on that div:
<div id="wrapping">
And then you have to change the jQuery selector:
$('#wrapping').find( ...
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.
加载中,请稍侯......
精彩评论