JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p><span>+</span>メニュー</p>
<ul>
<li>ホーム</li>
<li>ホーム</li>
<li>ホーム</li>
</ul>
</div>
CSS
div {
cursor: pointer;
display: block;
}
ul {
display: none;
}
.open {
display: block;
}
JavaScript
$(function () {
$('div').click(function () {
var $ul = $(this).find('ul');
if ($ul.hasClass('open')) {
$ul.removeClass('open');
$ul.slideUp();
$('span').text('+');
} else {
$ul.addClass('open');
$ul.slideDown();
$('span').text('-');
}
});
});