現在、非表示の div を非表示/表示する特定のリンクを含むリストがあります。リンクがクリックされると、クラス「アクティブ」が削除されて追加され、非表示の div がチェックされて、それが表示されているか非表示になっているか、それに応じて非表示/表示されているかが確認されます。これで問題なく動作しますが、1 つ問題があります。Squareをクリックすると#squareを表示したいのですが、もう一度クリックすると#squareを非表示にしたいのですが、.activeをチェックしているため、これを行うことはできません。これを達成できるようにコードを更新する方法について、誰か提案を提供できますか?
JS
$(document).ready(function(){
var square = $('#square'),
test = $('#test');
square.hide();
test.find('a').on('click', function(e){
if( !$(this).hasClass('active') ){
if ( square.is(':visible') ){
square.hide();
}
var id = $(this).data('id');
test.find('a').removeClass('active');
$(this).addClass('active');
if( id === 'square' ){
square.show();
}
}
e.preventDefault();
});
});
HTML
<ul id="test">
<li><a href="#">Triangle</a></li>
<li><a href="#" data-id="square">Square</a></li>
<li><a href="#">Circle</a></li>
</ul>
<div id="square"></div>