jquery slideup/slidedown functionality_问答_开发者

开发者 https://www.devze.com 2023-02-17 22:55 出处：网络

I have a checkbox, when clicked I want to slide the checkbox up and have its not dispaly. I can get it to slide up but then 1 second later it shows its ugly self again, how can i fix this. thank you v

相关专题：jquery

<html>
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <style type="text/css">
    .hiddenPanel
    {
      CLEAR: both;
      DISPLAY: none;
    }
    .dataEntry
    {
      BACKGROUND-COLOR: #FFFFEB;
      HEIGHT: 300px;
      MIN-WIDTH: 300px;
      MARGIN: 3px;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#chkTestPay').click(function ShowMedPay() {
        if ($('开发者_Go百科#chkTestPay').is(':checked')) {
          $('#toggleTestPanel').slideUp();
          $('#TestPanel').slideDown(1200);
          $('#toggleTestPanel').css("display", "none");
        }
        else
          $('#TestPanel').slideUp(2000);
        $('#toggleTestPanel').slideDown(1200);
      });
    });
  </script>

</head>
<body>
  <div class="togglePanelOption" id="toggleTestPanel">
    <h3>
      Test?
      <input type="checkbox" id="chkTestPay" /></h3>
  </div>
  <div id="TestPanel" class="hiddenPanel">
    <h3>
      Test 123
    </h3>
    <div class="dataEntry">
      enter info please
    </div>
  </div>
</body>
</html>

Your else is badly defined, so the slidedown always runs.

<script type="text/javascript">
     $(document).ready(function() {
      $('#chkTestPay').click(function ShowMedPay() {
        if ($('#chkTestPay').is(':checked')) {
          $('#toggleTestPanel').slideUp();
          $('#TestPanel').slideDown(1200);
          $('#toggleTestPanel').css("display", "none");
        } else {
          $('#TestPanel').slideUp(2000);
          $('#toggleTestPanel').slideDown(1200);
        }
      });
    });
</script>

Is it this is what you are trying to achieve? http://jsfiddle.net/FAAjc/