重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

アコーディオンメニューが開いている間の親の色変更

締切済

  • 質問者：msoz
  • 質問日時：
  • 回答数：1件

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

  • 回答者： ixkaito
  • 回答日時：

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>としないといけません。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報