-PR-
  • すぐに回答を!
  • 質問No.6640047
締切り
済み

アコーディオンメニューについて

  • 閲覧数333
  • ありがとう数3
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 0% (0/1)

jQueryを使ったアコーディオンメニューを作成しているのですが、
<dt>をクリックすると<dd>部分に外部のテキストファイルを表示させる方法がわかりません。

以下の記述に何を付け足せば良いのですか?

$(function(){
$("dd:not(:first)").css("display","none")
$("dt:first").addClass("selected");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
})


<dl>
<dt>Step.1</dt>
<dd><p>Lorem ...(中略)... venenatis.</p></dd>
<dt>Step.2</dt>
<dd><p>Integer ...(中略)... accumsan. </p></dd>
<dt>Step.3</dt>
<dd><p>Integer ...(中略)... imperdiet. </p></dd>
</dl>
  • 回答数1
  • 気になる数0

回答 (全1件)

  • 回答No.1
レベル13

ベストアンサー率 65% (870/1330)

 外部のテキストファイルをAJAXで読み込みたいんですよね。そのファイルの選択の条件が書いてないんで、適当にやってます。  ↓のサンプルではクリックした<dt>のテキストからその<dd>用の外部のテキストファイルのurlを勝手に作ってます。 <script type="text/javascript" src="http://www.goog ...続きを読む
 外部のテキストファイルをAJAXで読み込みたいんですよね。そのファイルの選択の条件が書いてないんで、適当にやってます。

 ↓のサンプルではクリックした<dt>のテキストからその<dd>用の外部のテキストファイルのurlを勝手に作ってます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript">
$(function(){

 $("dd:not(:first)").css("display","none")
 $("dt:first").addClass("selected");

 $("dl dt").click(function(){
   var url = "./" + $(this).text() + ".html";
   $("+dd",this).load(url,acordion($(this)));
  }).mouseover(function(){$(this).addClass("over");
  }).mouseout(function(){$(this).removeClass("over");
 });
 
 $("dt:first").click();

 function acordion(target){
  if($("+dd",target).css("display")=="none"){
   $("dd").slideUp("slow");
   $("+dd",target).slideDown("slow");
   $("dt").removeClass("selected");
   target.addClass("selected");
  }
 }

});
</script>




<dl>
<dt>Step.1</dt><dd></dd>
<dt>Step.2</dt><dd></dd>
<dt>Step.3</dt><dd></dd>
</dl>




./Step.1.htmlの中身はとりあえず、
<p>Lorem ...(中略)... venenatis.</p>

......
  • ありがとう数0
  • 回答数1
  • 気になる数0
このQ&Aのテーマ
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ