ドロップダウンメニューを作成するための次のHTMLがあります。
<li class="user-section user-section-original">
<img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
<span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
</li>
<li class="user-section-dropdown user-section hidden">
<img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
<span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
<a href="{% url logout %}" class="dropdown-item">Log Out</a>
</li>
ユーザーがメニューをクリックするとドロップダウンし、ユーザーがもう一度クリックすると(またはドロップダウンメニュー以外の場所をクリックすると)、メニューは再び非表示になります。
これが私がこれまでに持っているものです:
$("#header li.user-section").click(function() {
$("#header .user-section-dropdown").css('display', 'block');
$("#header .user-section-original").css('display', 'none');
});
これにより、アカウントセクションをクリックしたときにアカウントのドロップダウンが表示されます。もう一度クリックしたり、ページ上の別のセクションをクリックしたりしたときにも表示されないようにするにはどうすればよいですか?