![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
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ランキング
-
[jQuery]bxSlider 一番最後と...
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
iframe内のリンク文字のマウス...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
指定したフォルダの画像を一括...
-
JavaScript で flexslider の画...
-
「画像クリックで音声再生」を ...
-
画像の重なりの順序を代える方...
-
複数bxsliderをタブで切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報