あなたの「必」の書き順を教えてください

とあるサイトを参考にアコーディオンメニューを作成しています。
おおよその動作はうまくいっているのですが、1点どうしても実装できません。

例えば、menu2.htmlへ遷移した場合は、<ul class="menu2">内のメニューは
閉じることなく開いたままにしておきたいのです。他のページへ遷移した場合も同様です。

該当ページへ遷移した時に該当メニューのクラス名を変えること(open→block)で読み込み時は開いたままになるようになりましたが、他のメニューをクリックすると該当ページメニューも閉じてしまいます。

メニュー部分を開いたまま保てる方法をどなたかご教授いただけませんでしょうか。
何卒よろしくお願いいたします。

---------------------------------------
html

<ul class="acc">
<li>
<h3 class="h3_menu1 open"><a href="#">Menu1</a></h3>
<ul class="menu1">
<li class="menu1_1"><a href="menu1_1.html">Menu1_1</a></li>
<li class="menu1_1"><a href="menu1_2.html">Menu1_2</a></li>
<li class="menu1_1"><a href="menu1_3.html">Menu1_3</a></li>
<li class="menu1_1"><a href="menu1_4.html">Menu1_4</a></li>
<li class="menu1_1"><a href="menu1_5.html">Menu1_5</a></li>
</ul>
</li>

<li>
<h3 class="h3_menu2 block"><a href="#">Menu2</a></h3>
<ul class="menu2">
<li class="menu2_1"><a href="menu2.html#Menu3_1">Menu2_1</a></li>
<li class="menu2_2"><a href="menu2.html#Menu3_2">Menu2_2</a></li>
<li class="menu2_3"><a href="menu2.html#Menu3_3">Menu2_3</a></li>
<li class="menu2_4"><a href="menu2.html#Menu3_4">Menu2_4</a></li>
<li class="menu2_5"><a href="menu2.html#Menu3_5">Menu2_5</a></li>
</ul>
</li>

<li>
<h3 class="h3_menu3 open"><a href="#">Menu3</a></h3>
<ul class="menu3">
<li class="menu3_1"><a href="menu3.html#Menu3_1">Menu3_1</a></li>
<li class="menu3_2"><a href="menu3.html#Menu3_2">Menu3_2</a></li>
<li class="menu3_3"><a href="menu3.html#Menu3_3">Menu3_3</a></li>
<li class="menu3_4"><a href="menu3.html#Menu3_4">Menu3_4</a></li>
</ul>
</li>
</ul>

jQuery

var $j = jQuery;

$j(function(){

$j(".acc").each(function(){
$j("h3.open", this).each(function(index){
var $this = $j(this);
if(index > 0) {
$j("h3.open").next().hide();
} else {
$j(".menu1").hide();
}

$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
$j(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params,{complete: function(){$j("h3.block").css("display","block");}});

return false;
});
});
});
});

A 回答 (2件)

#1です。



>animateのなめらかな表示非表示は維持させてたいです。
animateでも、slideでも同じはずですが・・・?
(確認はしていませんが、結局同じ処理にいっているはずと思います)

そういえば、こんなのもありましたね。
 http://oshiete.goo.ne.jp/qa/7361644.html


まぁ、内容的にanimateで定義なさりたい場合は、slideの部分を入替えればすむはずです。
animateに代えても同じみたいですが、速度を早くすれば目立たなくなるかと。
あるいは、メニュー自体をabsoluteで表示したり、easingを指定してごまかす(?)とか…

#1では無駄な部分があったので…
$(function(){
 var params = {height:"toggle", opacity:"toggle"};
 $(".acc h3.open").click(function(){
  $(this).next().animate(params, 200).parent().siblings().find("h3.open").next(":visible").animate(params, 200);
 }).next().hide();
});
    • good
    • 0

コードを見てもいまひとつ意図がよく理解できないのですが、



classにopenの指定があるものだけ動作して、ないものは動作しないという解釈でよいのでしょうか?
(ないものをクリックした特は、他に何も処理しないということでよいのかなぁ)

よくわからないけれど、こんなのでもよいのだろうか?
(全角空白は半角に)
var $j = jQuery;

$j(function(){
 $j(".acc").each(function(){
  $j("h3.open", this).next().hide().end().click(function(){
   $j(this).next().slideToggle().parent()
    .siblings().find("h3.open").next().slideUp();
  });
 });
});

この回答への補足

fujillin様

ご回答いただきありがとうございます。
説明が足りずに申し訳ありません。
おっしゃる通りでclassがopenのものはアコーディオンメニューが適用されて
class名がblockのものには適用せず、表示を固定したいです。

いただきましたサンプルで試したところ表示・非表示自体は思い通りの動きだったのですが
animateがないことでカクカクした動きになってしまいましたのでできればanimateのなめらかな表示非表示は維持させてたいです。

もし他に解決策があれば、ご教授いただけませんでしょうか。
引き続きよろしくお願い致します。

補足日時:2012/05/09 01:44
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報