JQueryのアコーディオンメニューを使った製品リストを作っています。
アコーディオンメニュー自体はJQueryで実装してあったのですが、
さらに機能追加として、
「商品名で検索してヒットしたメニューを自動で開くようにして欲しい」との
依頼が来てしまいました。
JavascriptもJQueryも初心者のため、
実装方法が全く分からず困っています。
どなたかお知恵をお貸しいただければ幸いです。
[JQuery]
<script type="text/javascript">
$(document).ready(function(){
// 交互
$("dl.accordion>dd>ul li:nth-child(odd)").addClass("odd");
$("dl.accordion>dd>ul li:nth-child(even)").addClass("even");
//アコーディオン jQuery('dl.accordion dd').hide(); jQuery('dl.accordion dt').click(function() { var $this = jQuery(this); if ($this.hasClass('active')) { $this.removeClass('active'); }else{ $this.addClass('active'); } $this.next('dl.accordion dd').slideToggle('slow'); }); jQuery( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); }); </script>
[html]
<!--wrapここから--> <div id="wrap"></div> <!--wrapここまで--><!--どうぶつここから--> <dl class="accordion"> <dt>+どうぶつ</dt> <dd> <!--ねこ ここから--> <dl class="accordion"> <dt><span>+</span>ねこ</dt> <dd> <!--三毛猫ここから--> <dl class="accordion"> <dt><span>+</span>三毛猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--三毛猫ここまで--> <!--シャム猫ここから--> <dl class="accordion"> <dt><span>+</span>シャム猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--シャム猫ここまで--> <!--黒猫ここから--> <dl class="accordion"> <dt><span>+</span>黒猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--黒猫ここまで--> <!--山猫ここから--> <dl class="accordion"> <dt><span>+</span>山猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--山猫ここまで--> </dd> </dl> <!--ねこ ここまで--> <!--いぬ ここから--> <dl class="accordion"> <dt><span>+</span>いぬ</dt> <dd> <!--柴犬ここから--> <dl class="accordion"> <dt><span>+</span>柴犬</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--柴犬ここまで--> <!--ハスキーここから--> <dl class="accordion"> <dt><span>+</span>ハスキー</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ハスキーここまで--> <!--ブルドッグここから--> <dl class="accordion"> <dt><span>+</span>ブルドッグ</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ブルドッグここまで--> <!--ゴールデンレトリバーここから--> <dl class="accordion"> <dt><span>+</span>ゴールデンレトリバー</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ゴールデンレトリバーここまで--> </dd> </dl> <!--いぬ ここまで--> </dd> </dl> <!--どうぶつ ここまで-->
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/20 15:27
2015/04/20 15:29
2015/04/20 15:33
2015/04/20 23:07
2015/04/21 06:11
2015/04/21 09:02
2015/04/21 09:04
2015/04/21 11:12