jQueryでアコーディオンメニューを作成中です。
雛形を参考に形にはなりましたが、開いている状態でどの親メニューに属する子メニューなのかがわかりづらいため、子を表示している間の親画像を変更したいです。
参考URLのデモページで言いますと、親メニューの背景がオンマウスで黒からオレンジになります。しかし、子メニューを選択しようとマウスが親から外れると黒に戻ってしまいます。これを子が表示されている間、オレンジの状態にしたいのです。
現在私が作成中のメニューもオンマウスのときのみ色が変わるような状態になっています。web初心者のため、やさしく具体的に教えていただければ幸いです。
参考にしたURL
http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryi …
以下、HTMLの記述です。
文字数の関係上いろいろと省いたため、回答の際に足りない部分があれば追加いたしますのでお教えください。
お力をお貸しください。よろしくお願いいたします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. … type="text/javascript" ></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 開く・閉じる*/
$("ul.menu").hide();
$("ul.menu2").hide();
$("div#title").click(function(){
$("div#title").not(this).next().hide('fast');
$(this).next().slideToggle('fast');
});
$("#menu2 #title2").click(function(){
$(this).next().slideToggle('fast');
});
});
</script>
</head>
<body>
<div style="text-align:left; width: 220px; height: 40px;">
<!--HOME-->
<div>
<ul><a href="#"><img src="imgs/a01.gif" width="200" height="40" onMouseOver="this.src='imgs/a02.gif'" onMouseOut="this.src='imgs/a01.gif'"></a>
</ul>
</div>
<!--MENU1-->
<div id="title"><img src="imgs/b01.gif" width="200" height="40" onMouseOver="this.src='imgs/b02.gif'" onMouseOut="this.src='imgs/b01.gif'"></div>
<ul class="menu">
<li><a href="#">
<img src="imgs/c01.gif" width="220" height="40" onMouseOver="this.src='imgs/c02.gif'" onMouseOut="this.src='imgs/c01.gif'"></a></li>
<li><a href="#">
<img src="imgs/d01.gif" width="220" height="40" onMouseOver="this.src='imgs/d02.gif'" onMouseOut="this.src='imgs/d01.gif'"></a></li>
</ul>
<!--MENU2-->
<div>
<ul><a href="#"><img src="imgs/e01.gif" width="200" height="40" onMouseOver="this.src='imgs/e02.gif'" onMouseOut="this.src='imgs/e.gif'"></a>
</ul>
</div>
</div>
</body>
</html>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
cssでの制御でしたら簡単です。
下記サンプルコード
----
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. … type="text/javascript" ></script>
<style type="text/css">
.title{cursor:pointer;}
.title.hover{color:#f00;}
.menu li a:hover{color:#f00;}
</style>
<script type="text/javascript">
$(function(){
$('.menu').hide();
$('.title').click(function(){
$('.title').not(this).next('.menu').hide('fast');
$(this).next().slideToggle('fast');
});
$('.menuBox').hover(
function(){
$('.title',this).addClass('hover');
},
function(){
$('.title',this).removeClass('hover');
}
);
});
</script>
</head>
<body>
<div style="text-align:left; width:220px; height:40px;">
<!--HOME-->
<h1><a href="#">LOGO</a></h1>
<!--MENU1-->
<div class="menuBox">
<p class="title">メニュー1</p>
<ul class="menu">
<li><a href="#">メニュー1A</a></li>
<li><a href="#">メニュー1B</a></li>
</ul>
</div>
<!--MENU2-->
<div class="menuBox">
<p class="title">メニュー2</p>
<ul class="menu">
<li><a href="#">メニュー2A</a></li>
<li><a href="#">メニュー2B</a></li>
</ul>
</div>
</div>
</body>
</html>
----
ちなみに本題とは関係ありませんが、記載されているコードで、jQueryの読み込みが重複しています。また、<ul>タグの直下は<li>タグしか入れれませんので、<ul><li><a href="#"><img src="imgs/a01.gif" width="200" height="40" onMouseOver="this.src='imgs/a02.gif'" onMouseOut="this.src='imgs/a01.gif'"></a></li></ul>としないといけません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
jQueryで、リンクURLの一致を確...
-
jQueryで同じクラス名のものを...
-
フッター上部に謎の隙間
-
アップロードファイルの種類に...
-
HTMLで条件分岐はできますか?
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
Javascript初心者|jQueryの.va...
-
CSS <div>の入れ子が反映さ...
-
createElementで作成した要素を...
-
【javascript で動的に a タグ...
-
画面が真っ白になるのはどうして?
-
日替わりで画像を変更したい
-
背景色を透明化
-
ボタンを押すたびに交互に切り...
-
【短い】1つだけ展開/表示/非表...
-
jQueryでサーバー上のファイル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html5に変えるとスライドショー...
-
【iOS及びAndroid】リンク画像...
-
アコーディオンメニューが開い...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
[jQuery]bxSlider 一番最後と...
-
神経衰弱 順番に裏返し
-
チェックボックスと画像切替の連動
-
一定時間ごとに画像を切り替え...
-
複数の要素へ appendchild でき...
-
jqueryサブウィンドウにて画像...
-
Firefoxとクロームでフェードイ...
-
折り畳みメニューを使った場合...
-
fontsize.jsでhtmlの大中小の設...
-
jsでグリッドデザインのサムネ...
-
javascript 神経衰弱
おすすめ情報