slideUp이 (가) 버튼에서 작동하지 않습니다

Question

전문가님께 안녕하세요 jquery &에 새 소식을 전합니다. '대체 이메일 변경'링크를 클릭하면 상자가 아래로 이동하지만 실제로 저장 버튼을 클릭하면 위로 이동해야하지만 그렇지 않습니다. . 내 코드는 다음과 같습니다.

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 저장)를를 사용 HTML 요소에 대한 ID입니다. 다음과 같은 뭔가 : 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; 
});`