简体   繁体   English

单选按钮切换slideUp slideDown

[英]radio button toggle slideUp slideDown

I have this javascript: 我有这个javascript:

$("body").on('click', '#bhexperience', function () {
       // alert('fsdf');
        $(".hidePanel").slideDown('slow');
        //$(".tooltip").hide();
        //$(".block-conent").removeClass('block-conent');
        //$(this).parent().parent().find('.tooltip').show();
        //$(this).parent().parent().addClass('block-conent');
        //$(this).addClass('newContent');
    });

How do I make this .slideUp when unselected? 取消选择后如何制作此.slideUp?

Here is the aspx page html in case that helps: 如果有帮助,以下是aspx页面html:

<ul class="textinput reason gridA">
  <li><p class="feedback"><label><input runat="server" type="radio" name="feedbackreason[]" aria-label="What would you like to tell us about?" aria-valuetext="Your Baptist Health experience" title="What would you like to tell us about?: Your Baptist Health experience" id="bhexperience"  class="feedbackreason reqType" value="bd" clientidmode="Static" /> Your Baptist Health experience</label></p></li>
  <li class="block panel-content marginT20">
      <div class="hidePanel" style="display:none">
      <p class="hl4">To enable us to respond to your comments, would you please let us know who to contact?</p>
      <p class="marginT10 marginL10"><label for="feedbackName" class="alignL">Name:</label><input type="text" name="feedbackName" id="feedbackName" class="text feedbackName marginL5" title="feedback Name" /><br />
      <br />
      <label for="contactInfo" class="alignL">Contact Information:</label><input type="text" name="contactInfo" id="contactInfo" class="text contactInfo marginL5" title="Contact Information" /></p>
      <p class="hl4 marginT10">For immediate patient portal service, please call
      <br />
      <strong><a class="phoneCall" style="color: mediumvioletred" href="tel:18446220622">1.844.622.0622</a></strong> (toll-free, 24/7)</p>       
      </div>
  </li>
</ul>

Check out the blur event in jQuery: 在jQuery中检查blur事件:

$('#bhexperience').on('blur', function() {
    $(".hidePanel").slideUp('slow');
});

EDIT: See my updated jsfiddle here . 编辑: 在这里查看我更新的jsfiddle。

$('.textinput.reason input:radio').on('change', function() {
    if ( $(this).val() == 'bd' ) {
        $(".hidePanel").slideDown('slow');
    } else {
        $(".hidePanel").slideUp('slow');
    }
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM