jQueryでの開閉メニューについて

解決済

質問者：aoumiushi
質問日時：2011/11/23 22:15
回答数：1件

jQueryでアコーディオン（開閉）メニューを作成しています。
メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？
単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。
画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。
皆様の知恵をご教示いただけると幸いです。
以下ソースです。よろしくお願いいたします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="../js/jquery/jquery.js"></script>

<script>
</script>
<style type="text/css">
.leftmenu {
float: left;
width: 200px;
background: #ff0000;
list-style: none;
}
.leftmenu h4 {
padding: 0;
/*margin: 0;*/
margin: 5px 2px 5px 5px;
}
.leftmenu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.leftmenu li {
padding: 0;
margin: 0;
}
.leftmenu a,
.leftmenu a:visited {
#text-transform:uppercase;
display: block;
height: 25px;
line-height: 25px;
padding: 0 10px 0 20px;
color: #ffffff;
background: #303030;
text-decoration: none;
}
.leftmenu a:hover {
color: #000;
background-color: #acac23;
}
.leftmenu span{
float:right;
}
</style>

<title>sample</title>
</head>
<body>

<div class="wrapper">
<div class="leftmenu">
<h4 class="conmenu">Menu-1</h4>
<ul class="sub">
<li><a href="#">Menu-1a</a></li>
<li><a href="#">Menu-1b</a></li>
<li><a href="#">Menu-1c</a></li>
<li><a href="#">Menu-1d</a></li>
</ul>
<h4 class="conmenu">Menu-2</h4>
<ul class="sub">
<li><a href="#">Menu-2a</a></li>
<li><a href="#">Menu-2b</a></li>
<li><a href="#">Menu-2c</a></li>
<li><a href="#">Menu-2d</a></li>
<li><a href="#">Menu-2e</a></li>
</ul>
<h4 class="conmenu">Menu-3</h4>
<ul class="sub">
<li><a href="#">Menu-3a</a></li>
<li><a href="#">Menu-3b</a></li>
<li><a href="#">Menu-3c</a></li>
</ul>
</div>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2011/11/24 12:45

クリックの処理内容が、表示／非表示のほうはトグルになっているのに、マークの処理は一律にしているところが問題なのではないでしょうか？

+-を反転する処理にしてあげればよろしいかと。

例えば
$('h4.conmenu').click(function(){
　$(this).next().slideToggle('fast');
　var s = $(this).find("span");
　s.html(marks[s.html()==marks.closedMark?'openedMark':'closedMark']);
});

あるいは、clickメソッドではなくtoggleを用いて
$('h4.conmenu').toggle(function(){
　$(this).next().slideDown('fast');
　$(this).find("span").html(marks.openedMark);
},function(){
　$(this).next().slideUp('fast');
　$(this).find("span").html(marks.closedMark);
});
とか。

一方で、メニューのタイトルとその子の構造的な関係が親子になっていないので、処理がしにくいようにも思われます。
（このままの構造だと、多階層メニューに展開するのが大変そう）

なお、ご質問とは関係ありませんが、
＞//オンマウスでカーソル変更
の部分の処理は意味がないのではないでしょうか？
（マウスがはずれた時のカーソルを制御することに意味がないし、オンマウスの度に処理するのも無駄では？）
最初からCSSで cursor:pointer; としておけば済むように思います。