slideUp不工作的按钮

-1

嗨，专家，我是新来的jquery &在这里，当我点击'更改备用电子邮件'链接框下滑，但当点击保存按钮，实际上它应该滑动但它没有。这是我的代码。slideUp不工作的按钮

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

来源

2017-02-27 Pkprabu

使用'效果基本show（）''不隐藏（）'和附加事件处理程序'btn' – Satpal

我认为你需要使用

$('.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/

来源

2017-02-27 07:50:07 Nitesh

它的工作。非常感谢。 – Pkprabu

矿是好的，你确定你跑了在1个多浏览器的代码，看看结果如何呢？也许你有slideUp()

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

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

来源

2017-02-27 08:18:20

CSS冲突为了解决这个问题，并有超过您正在搜索的元素更好的控制（如保存BTN）使用在html元素上的Id。类似下面：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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" id="btnSave">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button> 
 
</div> 
 
</div> 
 
</div>

来源

2017-02-27 08:18:35

使用下面的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>

你的跨度有没有效果，使用按钮类（备用的电子邮件-BTN）布顿标签 <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>

里面，当你躲在备用的电子邮件箱类隐藏的仅仅是你的部分，而没有任何动画。使用slideUp和slideDown会给你效果。你也可以使用slideToggle（）。像

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

或者使用一些ID

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

来源

2017-02-27 08:23:26

slideUp不工作的按钮

回答

相关问题