初めまして。
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;
});
});
});
});
すみませんが、よろしくお願いいたします。
No.1
- 回答日時:
こんなんでどうでしょう?
<style>
ul.acc ul{
display:none;
}
ul.acc li{
behavior:expression(
this.onmouseover=function(){this.className="hover"}
,this.onmouseout=function(){this.className=""}
)
}
ul.acc li:hover ul,ul.acc li.hover ul{
display:block;
}
</style>
<ul class="acc">
<li><a href="1">category1</a>
<ul>
<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="1">category2</a>
<ul>
<li><a href="11">menu 2-1</a></li>
<li><a href="12">menu 2-2</a></li>
<li><a href="13">menu 2-3</a></li>
</ul></li>
</ul>
ソースのご提供ありがとうございます。
CSSを設置してみましたが、状況は変わりませんでした。
私のほうでもいろいろと探してみます。
ありがとうございます。
No.2
- 回答日時:
なんだかこれとほとんど同じですね…
>http://triplexxx.jp/archives/150
基本的にはonclickで処理する替わりに、onmouseover、onmouseoutなどの場合に開閉するようにしてあげればよいはずですけど。
ご自分で作成するのなら、かなり近いのがこんな感じ?
http://hyper-text.org/archives/2006/12/slidemenu …
つくるのが面倒なら、ライブラリを利用する手もあります。
(設定でクリック、マウスオーバーなどを選択できるもの)
http://docs.jquery.com/UI/Accordion#event-change
http://www.i-marco.nl/weblog/yui-accordion/#basic
http://www.dynamicdrive.com/dynamicindex17/ddacc …
あとちゃんと中身を確認してないけど
http://jqueryfordesigners.com/slide-out-and-draw …
http://www.leigeber.com/2008/10/animated-javascr …
http://tutorialblog.org/10-javascript-accordion- …
おまけ (CSSで実現するもの = #1様の回答の方法)
http://digibot.jp/blog/2008/04/css.html
http://css-eblog.com/csstechnique/accordionmenu. …
(IE対応にはスクリプトが必要ですが…)
No.3ベストアンサー
- 回答日時:
jQueryを使っているならclickをmouseoverに変えるだけでいいんじゃないでしょうか。
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('normal');
$this.mouseover(function(){
j$(this).next().show('normal').parent().siblings()
.children("ul:visible").hide('normal');
return false;
});
});
});
});
動作が分りやすいようにスピードを入れてみました。
アコーディオンというと、toggleよりもshowの方がいいような気がして勝手に変えましたが、好みでなければ戻してください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- その他(プログラミング・Web制作) どうしてもエラーが解決できません。 1 2022/07/23 04:32
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報