次のjquery関数で多くの成功を収めました。タイトルがクリックされるまでコンテンツを非表示にすることができ、その後 ul アイテムが展開されます。私はこの機能が気に入っていますが、一度に 1 つの ul しか開いてほしくないのです。タイトルをクリックすると、そのタイトルが展開され、開いている残りのすべてが折りたたまれるようにするにはどうすればよいですか?
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#expandable_menu > ul > a.expanded + li').slideToggle('slow');
$('#expandable_menu > ul > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> li').slideToggle('slow');
});
}, 250);
});
</script>
これが伸縮するものの構造です。
<ul id="expandable_menu" class="expandable_menu">
<ul>
<a class="expanded">TITLE</a>
<li class="expandablemenu" ">
<ul>
<li>
<div> This is where the content goes </div>
</li>
</ul>
</li>
</ul>
<ul>
<a class="expanded">TITLE</a>
<li class="expandablemenu" ">
<ul>
<li>
<div> More content! </div>
</li>
</ul>
</li>
</ul>
</ul>