Question

嗨专家我是jquery＆amp;的新手。在这里，当我点击“更改备用电子邮件”链接时，该框正在向下滑动但是当单击“保存”按钮实际上它应该向上滑动但它没有。这是我的代码。

HTML：

<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>

Jquery的：

$('.alternate-email').click(function(){
        $('.alternate-email-box').slideDown();
        return false;
    });
 $('.alternate-email-btn').click(function(){
        $('.alternate-email-box').hide();
        return false;
    });

Answer 1

我认为你需要使用

$('.alternate-email').click(function(){
        $('.alternate-email-box').slideDown();
        return false;
    });
 $('.alternate-email-btn').click(function(){
        $('.alternate-email-box').slideUp();
        return false;
 });

jsfiddle：https://jsfiddle.net/pbvb7fm5/

Answer 2

我很好，你确定你已经在多个浏览器上运行代码才能看到结果吗？也许你的css与slideUp()冲突了

＆＃13;

$('.alternate-email').click(function(){
        $('.alternate-email-box').slideDown();
        return false;
    });
 $('.alternate-email-btn').click(function(){
        $('.alternate-email-box').slideUp();
        return false;
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>

＆＃13;

Answer 3

要解决此问题并更好地控制要搜索的元素（如保存btn），请在html元素上使用Id。如下所示：

＆＃13;

occupy the whole view-port

＆＃13;

$('.alternate-email').click(function(){
        $('.alternate-email-box').slideDown();
        return false;
    });
 $('#btnSave').click(function(){
        $('.alternate-email-box').slideUp();
        return false;
 });

＆＃13;

Answer 4

使用以下Html代码。

<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius alternate-email-btn">Save </button>
</div>
</div>
</div>

<span class="alternate-email">change alternate email</span>

您的范围无效，并使用按钮标签内的按钮类（alternate-email-btn） <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>

当您隐藏alternate-email-box类时，它只隐藏您的部分而没有任何动画。使用slideUp和slideDown将为您提供效果。您也可以使用slideToggle（）。像

   $('.alternate-email-box').slideToggle();

或者使用一些id

$('#button').click(function() {
  $('.alternate-email-box').slideUp();
  return false;
});`

slideUp无法使用按钮

4 个答案: