我正在尝试访问埋在Divs和其他东西下的手风琴的Moveover属性。这是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>
以下是我用来尝试访问Accordion按钮的脚本部分:
$('.wrapping').find('p.accordionButton').mouseover(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
我在鼠标悬停功能中放置了一个ALERT命令,它永远不会触发,所以我知道我没有正确到达Accordion按钮。有人可以帮忙吗?
已添加:这是整个JQuery脚本。它并不大,但它是多余的。我将此ASP.NET页面作为动态网页。我知道我有裁员,但我是JQuery的新手:
//检查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());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show(hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
});
答案 0 :(得分:1)
您可以尝试消除这种歧义:
<div id="wrapping" class="wrapping">
我建议您删除该div上的类:
<div id="wrapping">
然后你必须改变jQuery选择器:
$('#wrapping').find( ...
答案 1 :(得分:0)
我通过删除启用动态页面的代码解决了这个问题。这简化了代码并消除了一定程度的复杂性。
上面显示的代码有效,我甚至让它变得更加漂亮。如果您对此感到好奇,请查看我的test site。