2回目のクリックでクラスを非表示にする方法

Question

これは私のコードです。 初めてクリックすると、 "surveytooldd"という名前の部門IDを表示できます。クリックする前に消えてしまいます。しかし、最初にクリックすると表示されますが、2回目のクリックでそれをディサッパーしたいと思います。

<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トグルを使用します。

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

この機能は、要素の状態（表示と非表示）を切り替えます。要素が現在非表示の場合は表示され、逆の場合は無効になります。あなたはまだ下のコメントよりも、問題に直面した場合

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

：このhere

Answer 2

について よりはこれを試してみてください。

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

使用してみてください "表示：なし;" 「visibility：hidden;」の代わりに と滑らかなトグルの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>