

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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<tr>指定した表の行要素をボ...
-
その要素がjQueryでremove()済...
-
初心者です。gulpでコンパイル...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
Colorboxがうまく設置できません
-
フォームが空欄の時にフォーム...
-
イラストレーター、縦中横のシ...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
スマホ上で、左右スワイプで次...
-
viewport幅
-
ラジオボタンを複数選択したと...
-
<tr>指定した表の行要素をボ...
-
ボタンを押したあとに画像を表...
-
画面遷移を行わずに同一ページ...
-
イラストレーター、縦中横のシ...
-
GASでチェックボックスを一括of...
-
jqueryのselect2で検索欄の文字...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
セレクトを全て選択されていな...
-
セレクトボックスで配列を呼び...
-
タグを教えてください。
-
jsで質問です。 formをsubmitし...
-
Adobe acrobat proでフォームを...
-
任意の変数が任意の値になった...
-
jsで質問です。 ボタンが二つ存...
-
2段階プルダウンで1段階目の選...
おすすめ情報