Question

这是我的代码。如果我第一次点击我可以显示名为“surveytooldd”的div id。在点击之前消失。但是如果我先点击它就会出现，但我想在第二次点击时将其消除。

<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();

此功能在元素的状态（显示和隐藏）之间切换。如果元素当前是隐藏的，则会显示该元素，反之亦然。有关此here

的更多信息

Answer 2

试试这个：

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

如果你仍然面临问题而不是下面的评论。

Answer 3

试试这个

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

使用＆＃34; display：none;＆＃34; 而不是＆＃34; visibility：hidden;＆＃34; 和slideToggle进行平滑切换

＆＃13;

<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>

＆＃13;

如何在第二次点击时隐藏课程

4 个答案: