※ ChatGPTを利用し、要約された質問です（原文：jQueryでの開閉メニューについて）
jQueryでの開閉メニューについて
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><!--
$(document).ready(function(){
var marks = {
closedMark: '[+]',
openedMark: '[-]'
};
//開閉状態表示
$("h4.conmenu").append("<span>"+ marks.closedMark +"</span>");
//オンマウスでカーソル変更
$("h4.conmenu").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});
//最初に表示するか？
$("ul.sub").css("display","none");
//クリック処理
$('h4.conmenu').click(function(){
// 開閉する速度
$(this).next().slideToggle('fast');
// マークを変える
// $(this).find("span").html(marks.openedSign);
});
});
//-->
</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>
お礼
回答ありがとうございます。 おかげ様で、うまく表示できるようになりました。 オンマウスでカーソル変更に関してですが、 ご指摘の通り確かに必要ありませんね。 どうもありがとうございました。