как скрыть класс при втором нажатии

Question

это мой код. если я нажму первый раз, я могу показать div id, названный как «surveytooldd». который исчезает перед щелчком. но если я нажму сначала, он появится, но я хочу отключить его при втором нажатии.

<div class="tool survey-tool vertical-center color14" onclick="dropdownmenuHeader(this, event, 'surveytooldd');MM_showHideLayers('surveytooldd','','show');MM_showHideLayers('caption','','hide')"> 
    <img src="" class="vertical-center"> 
    <span class="caption vertical-center">Survey Tool</span> 
</div> 

<ul class="survey-tool-drpdwn" style="visibility: hidden;" id="surveytooldd"> 
    <li class="survey-tool"> 
     <asp:LinkButton id="aSurveyTool" runat="server" OnClick="aSurveyTool_Click"><span>Survey Tool</span></asp:LinkButton> 
    </li> 
    <li class="poll-tool"> 
     <asp:LinkButton id="aPollTool" runat="server" OnClick="aPollTool_Click"><span>Poll Tool</span></asp:LinkButton> 
    </li> 
    <li class="assessment-tool"> 
     <asp:LinkButton id="aAssessmentTool" OnClick="aAssessmentTool_Click" runat="server"><span>Assessment Tool</span></asp:LinkButton> 
    </li> 
</ul> 

Answer 1

Использовать jQuery toggle.

$(".target").toggle(); 

Эта функция переключается между состояниями (показать и скрыть) элемента. Если элемент в настоящее время скрыт, он будет показан и наоборот. Подробнее об этом here

Answer 2

Попробуйте это:

$('class or id').click(function(){ 
$(#surveytooldd).toggle(); 
}); 

, если вы по-прежнему сталкивается с проблемой, чем комментарий ниже.

Answer 3

попробуйте эту

$("#disp").click(function() { 
 
    $("#surveytooldd").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="survey-tool-drpdwn" style="display: none;" id="surveytooldd"> 
 
    <li class="survey-tool"> 
 
    <asp:LinkButton id="aSurveyTool" runat="server" OnClick="aSurveyTool_Click"><span>Survey Tool</span> 
 
    </asp:LinkButton> 
 
    </li> 
 
    <li class="poll-tool"> 
 
    <asp:LinkButton id="aPollTool" runat="server" OnClick="aPollTool_Click"><span>Poll Tool</span> 
 
    </asp:LinkButton> 
 
    </li> 
 
    <li class="assessment-tool"> 
 
    <asp:LinkButton id="aAssessmentTool" OnClick="aAssessmentTool_Click" runat="server"><span>Assessment Tool</span> 
 
    </asp:LinkButton> 
 
    </li> 
 
</ul> 
 
<button id="disp">Show Hide</button>

Answer 4

Используйте "дисплей: нет;" вместо «видимость: скрытая»; и slideToggle для плавного переключения

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tool survey-tool vertical-center color14" onclick="$('#surveytooldd').slideToggle()"> 
 
    <span class="caption vertical-center">Survey Tool</span> 
 
</div> 
 
<div> 
 
    <ul class="survey-tool-drpdwn" style="display:none;" id="surveytooldd"> 
 
    <li class="survey-tool"><span>Survey Tool</span> 
 
    </li> 
 
    <li class="survey-tool"><span>Poll Tool</span> 
 
    </li> 
 
    <li class="survey-tool"><span>Assessment Tool</span> 
 
    </li> 
 
    </ul> 
 
</div>