<a href>が機能しない

2023/09/06 00:22

このQ&Aのポイント

<a href>が機能しない
headerAreaとcontentsArea内に貼ったリンク<a href>が機能しない。footerAreaに貼ったリンクは機能するが、他の場所では機能しない。
何が原因で<a href>が機能しないのかわからず、困っている。

ベストアンサー

<a href>が機能しない。

2014/12/26 00:05

以下のようなhtmlの中で、headerAreaとcontentsArea内に貼ったリンク<a href>が全く機能しません。でも、footerAreaに貼ったリンクは機能します。何が悪いのか分からなくて手詰まりになっています。ご教授下さい。  </style> </head> <body> <div id="headerArea"> <h1><a href="index.html"><img src="images/title.png" alt="タイトル"></a></h1> <div class="oe_wrapper"> <div id="oe_overlay" class="oe_overlay"></div> <ul id="oe_menu" class="oe_menu"> <li><a href="">aaaaa<BR><BR><small>School Information</small></a> <div> <ul class="oe_full"> <li class="oe_heading">bbbb</li> <li><a href="#">cccc</a></li> <li><a href="#">dddd</a></li> <li><a href="#">eeee</a></li> <li><a href="#">hhhh</a></li> <li><a href="#">dddd</a></li> </ul> </div> </li> </ul> </div> </div> <div id="contentsArea"> 杉並区<BR> 杉並区<BR> 杉並区<BR> 新宿区<BR> <a href="http://www.educ.city.ibaraki.osaka.jp/e-higashi">豊島区</a><BR> 杉並区<BR> 杉並区<BR> </div> <div id="footerArea"> Copyright©2014 <a href="index.html">aaa株式会社</a> all rights reserved. </div>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $oe_menu = $('#oe_menu'); var $oe_menu_items = $oe_menu.children('li'); var $oe_overlay = $('#oe_overlay'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.

soulset319
お礼率80% (24/30)

CSS
回答数2
ありがとう数7

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

XenoneX
ベストアンサー率85% (12/14)

2014/12/27 23:32 回答No.2

chromeとie10で確かめましたが、問題なく動きました。どの環境で試したのでしょうか？リンクが機能しないというのは、遷移できないのでしょうか？それとも、リンクにすらなってないのでしょうか？言語系に関する質問は、ブラウザ環境などを書くようにするとスムーズに進みますよ。

その他の回答 (1)

XenoneX
ベストアンサー率85% (12/14)

2014/12/26 01:30 回答No.1

すぐに確かめられるように、全てのコードを載せて頂けますか？ HTMLのバージョンも知りたいので…。入らなければjs部分は除いていいです。確かめた環境（IE？chrome？バージョンは？）もお願いします。あと、機能しないというのはそもそもリンクになってないという認識でよろしいでしょうか？

質問者

補足 2014/12/27 21:55

回答ありがとうございます。見よう見まねでやっているので、無駄な部分や間違いが多いと思います。よろしくお願いいたします。以下がhtmlの上記より上の部分です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="ja"> <head> <title>aaa株式会社</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/> <meta name="description" content="" /> <meta name="keywords" content=""/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/style1.css" type="text/css" media="screen"/> <script src="js/cufon-yui.js" type="text/javascript"></script> <script type="text/javascript"> </script> <style type="text/css"> あと、外部スタイルシート（css/style1.css)が以下のようになっています。 *{ margin:0; padding:0; } body{ background:#000; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:13px; color: #fff; text-transform:capitalize; overflow-x:hidden; } .oe_overlay{ background:#000; opacity:0; position:fixed; top:0px; left:0px; width:100%; height:100%; } ul.oe_menu{ list-style:none; position:relative; margin:10px 0px 0px 40px; width:784px; float:left; clear:both; } ul.oe_menu > li{ width:112px; height:101px; padding-bottom:2px; float:left; position:relative; } ul.oe_menu > li > a{ display:block; background-color:#101010; color:#ddd; text-decoration:none; font-weight:bold; line-height:1.0em; font-size:12px; width:90px; height:80px; padding:10px; margin:1px; text-shadow:0px 0px 1px #000; opacity:0.8; } ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a{ background:#fff; color:#101010; opacity:1.0; } .oe_wrapper ul.hovered > li > a{ background:#fff; text-shadow:0px 0px 1px #FFF; } ul.oe_menu div{ position:absolute; top:103px; left:1px; background:#fff; width:610px; height:180px; padding:30px; display:none; } ul.oe_menu div ul li a{ text-decoration:none; color:#222; padding:2px 2px 2px 4px; margin:2px; display:block; font-size:12px; } ul.oe_menu div ul.oe_full{ width:100%; } ul.oe_menu div ul li a:hover{ background:#000; color:#fff; } ul.oe_menu li ul{ list-style:none; float:left; width: 150px; margin-right:10px; } li.oe_heading{ color:#000; font-size:16px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #000; }

関連するQ&A

ＣＳＳレイアウト　positionについて
下記のタグにてpositionタグを使って指定した場合ＩＥの文字サイズを変更しるとcopyrightと言うboxがずれてしまいます。ずれない方法はありませんでしょうか？お分かりの方のご回答をお待ちしております。なお簡単なタグを記載してくれると幸いです。 body { 　　　margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; 　　　　　　width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
スライド機能について
勉強の為カルーセルを自作しております。そこで知識のある方に、是非ともお教え頂きたいことがございましてご質問させていただきます。現状私が書いたhtml、css、jsは下記となります。 ▼CSS <style type="text/css"> #Wrap{width:360px; margin:30px auto;} #Carousel{ width:360px; height:380px; padding-top:50px; padding-bottom:40px; float:left; position:relative; } #Carousel .Carousel-inner{ height:370px; overflow:hidden; } #Carousel .Carousel-inner ul li{ height:180px; margin-bottom:10px; display:block; } #btn_up,#btn_down{ position:absolute; left:165px } #btn_up{top:10px;} #btn_down{bottom:10px;} ▼html <div id="Wrap" class="clearfix"> <div id="Carousel"> <div class="Carousel-inner"> <div class="CarouselMove"> <ul> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFE599&text=img1"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/99F8FF&text=img2"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img3"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img4"></a></li> </ul> </div> </div> <a href="#" id="btn_up"><img src="img/up.gif" alt="" width="30" height="30" /></a> <a href="#" id="btn_down"><img src="img/down.gif" alt="" width="30" height="30" /></a> </div> </div> ▼JS $(function(){ var target = $('#Carousel'); var targetList = target.find('li'); var targetLength = targetList.length; var showLength = 2;//見えている枚数 var moveLength = 2;//動かす枚数 var itemHeight = targetList.outerHeight(true);//画像一枚の高さ var moveDistance = itemHeight * moveLength;//一度に動かす量 var moveSpeed = 400; var easing = 'swing'; var clickFlg = 0; $('#btn_down').click(function(e){ e.preventDefault(); if(!clickFlg){ clickFlg = 1; var clone = target.find('li').slice(0,moveLength).clone(true); clone.appendTo(target.find('li').parent().filter(':last')); target.find('li:first').stop() .animate({marginTop : '-=' + moveDistance}, moveSpeed , easing , function(){ target.find('li').slice(0,moveLength).remove(); clickFlg = 0; }); }else return; }); }); 上記を実行すると問題なく動きます。ただ、btn_upについてはどのように記述すれば良いかがわからず教えて頂きたいと思っております。この考えでダメであれば、代替案をご教示願えれば幸いです。仕様としましては、今後プラグインにする予定でして、 var showLength = 2;//見えている枚数 var moveLength = 2;//動かす枚数上記の2点は変更できるようにしたいと思っております。また、1点現状でも何故こうなるかわからない点がございまして、 var clone = target.find('li').slice(0,moveLength).clone(true); このtarget.find('li')を変数に格納しているtargetListにすると動作しなくなってしまいます。何故なのかわからず。。こちらと併せてご教示いただけませんでしょうか。お忙しいところ大変恐縮ですが宜しくお願い致します。
- ベストアンサー
- JavaScript
１ページ内に　複数のタブボックスを設置
１ページ内に　複数のタブボックスを設置するために、下記のようなコードを記載しました。おそらく最後のToggleをつかってタブを切り替えるところの記載方法がよくわからないため動かず困っています。すいませんがだれかご教授ください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入りますサンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入りますサンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>
- ベストアンサー
- JavaScript
１ページ内にタブボックスをたくさん設置
下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定ですこのため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 Toggleのところの記述が悪いのかうまく動きません。初心者ですいませんが、ご教授ください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入りますサンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入りますサンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>
- ベストアンサー
- JavaScript
Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
jQuery アコーディオンメニューについて
とあるサイトを参考にアコーディオンメニューを作成しています。おおよその動作はうまくいっているのですが、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; }); }); }); });
- ベストアンサー
- JavaScript
下記のようにクリックすると、サブメニュー現れるソースがあります。
下記のようにクリックすると、サブメニュー現れるソースがあります。エラーなく作動します。＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <a href=# onclick="slideCateScroll()"><small>大メニュー１</small></a> <div id="scroll-list" class="scroll-list"> <li><a href="index1.php">小メニュー１</a><br> <li><a href="index1.php">小メニュー２</a><br> <li><a href="index1.php">小メニュー２</a><br> </div> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊質問ですが、もしこのように二つ以上したい場合どうしたらいいでしょうか？ <a href=# onclick="slideCateScroll()"><small>大メニュー１</small></a> <div id="scroll-list" class="scroll-list"> <li><a href="index1.php">小メニュー１１</a><br> <li><a href="index1.php">小メニュー１２</a><br> <li><a href="index1.php">小メニュー１３</a><br> </div> <a href=# onclick="slideCateScroll()"><small>大メニュー２</small></a> <div id="scroll-list" class="scroll-list"> <li><a href="index1.php">小メニュー２１</a><br> <li><a href="index1.php">小メニュー２２</a><br> <li><a href="index1.php">小メニュー２３</a><br> </div> ご教授よろしくお願いします。
- ベストアンサー
- JavaScript
マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 JSはプログラムを組んだことがなく、悩んでおります。一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> ～以下省略します～そしてjavascriptのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ j$(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
jQueryのアコーディオンメニュー　開閉の制御
jQueryのアコーディオンメニュー　開閉の制御こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして（http://triplexxx.jp/archives/150）アコーディオンメニューを設置しました。ページ遷移後でも、常に一番目のメニューが開いている状態なので、選択しているページのメニューだけを開いている状態にしたいのですがどの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが新しいコードを書ける知識がないので、教えてください。よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- javascript ---------------------- var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉
お世話になります。js初心者の者です。 jqueryのアコーディオンメニューを設置したいのですが、親<li>へのマウスオーバーで開く、子<li><ul><li>からのマウスアウトで閉じるという動作がうまくいきません。また、オープン時はすべて閉じた状態にもしたいのですが。現状クリックでの開閉です。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> jqueryのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); マウスオーバーのみでの開閉は$this.click(function()をmouseoverに書き換えればできるのですが。また、どのサンプルを見ても必ず初期段階が１項目開いた状態になっているのも、閉じて表示させたいのです。よろしくご指導お願いします。
- ベストアンサー
- JavaScript