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不工作的按鈕

回答

相關問題