0
私はこの質問を以前にも持っていましたが、最初に正しく質問しなかったかもしれないので、ここで2回目の試みです。私は動的なWebページでサイトを作成しています。これらのページの1つには、テーブルの下に3つのアコーディオンがありますが、「ラッピング」と呼ばれる部門に囲まれています。これらのアコーディオンを動的ページの一部として表示するには、「コンテンツ」と呼ばれるDiv I（テスト目的のID名とクラス名の両方）にそれらを含めます。ここで2つのDivs内のJQueryアコーディオンを見つける
は、これらのアコーディオンを含む動的なコンテンツのHTMLセクションです：
<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>
はここで私が使用している全体の関連するjQueryのコードセグメントさ：
$(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();
});
はここに関連付けられているCSSですこのプログラムには、この例には適用されないスタイルがいくつか含まれています。
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
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;
}
質問： 上記のテストステートメントで、ページ上の各アコーディオンボタンを見つけることができます（私は3つのアラート、各accordionButtonに1つのアラートを取得します）が、同じメソッドを使用してマウスオーバーを行うことはできません。何故ですか？
[my test]（http://jsfiddle.net/Ff5Lf/）で動作します。それはいくつかの論理エラーがありますが、マウスオーバーが機能します。 – cambraca
@robert、その仕事も私のために働いています... cambracaから提供されたリンク – kobe
mouseoverを私のために働かせることができる唯一の方法は、 "content" divの全体を "wrapping" 1つのdivは、一方が他方の内部にあるのではなく、他方のdivに続く。私が試すことができる何か他にありますか？ – Robert