slideUpは、ボタンの上に私はここにjqueryの&に新たなんだ

Question

こんにちは専門家が働いていません。 は、ここに私のコードです。

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

鉱山は大丈夫です、あなたは確信しています走ったこれを解決するには、あなたが探している要素についてのよりよい制御を持っている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>

Answer 3

との1つの以上のブラウザ上のコードでは、結果を参照するには？多分あなたのCSSの競合（のようなBTNを保存）を使用Idのhtml要素。以下のような何か：HTMLコードに続いて

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

Answer 4

使用。

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

あなたのスパンは効果がありませんし、あなたが代替のメールボックスのクラスを隠している場合はそれだけでどんなことなく、あなたのセクションを隠しブトンタグ <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>

内のボタンクラス（代替電子メールBTN）を使用しますアニメーション。使用slideUpとslideDownはあなたに影響を与えるだろう。 slideToggle（）を使用することもできます。同様

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

それとも

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