Hiển thị phần tử jQuery và trượt xuống trên nút bấm

Question

Vì vậy, Im học jQuery/JavaScript. Tôi tin rằng tiêu đề nói rằng tất cả cố gắng để có được một phần div được thiết lập để display: none hiển thị trong khi từ từ trượt xuống trên nút bấm

Theo hướng dẫn jQuery, W3schools và vài nơi khác mà tôi đã cố gắng để đọc lên, điều này là những gì tôi nghĩ ra. Không cần phải nói nó trông không đẹp.

Logic của tôi ở đây là mã sẽ được thực thi khi nhấn nút nhấn, tôi đặt trình xử lý sự kiện onclick vào phần tử nút.

function showPackages(){ 
 
    $('#submitBtn').on('click', function(){ 
 
    $('#showPackages').slideDown('slow', function(){ 
 
     $('#showPackages').css('display', 'inline'); 
 
    }); 
 
    }); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="panel-group" id="dispPackages" style="display: none"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
 
     Collapsible Group 1</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
 
     Collapsible Group 2</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Bất kỳ sự giúp đỡ/lời khuyên đánh giá cao.

Answer 1

Trước hết, bạn phải phân tách sự kiện trình xử lý.

function showPackages(){ 
    $('#submitBtn').on('click', function(){ 
     $('#showPackages').slideDown('slow', function(){ 
     $('#showPackages').css('display', 'inline'); 
     }); 
    }); 
} 

Khi bạn ghi lại mỗi lần bạn nhấp vào đầu vào, nó đính kèm trình xử lý sự kiện nhấp vào submitBtn.

Thay đổi nó như thế này:

function showPackages(){ 

} 
$('#submitBtn').on('click', function(){ 

}); 
$('#showPackages').slideDown('slow', function(){ 
    $('#showPackages').css('display', 'inline'); 
}); 

Nhưng, nếu bạn muốn kích hoạt sự kiện tự động, sử dụng phương pháp .trigger().

function showPackages(){ 
    $('#submitBtn').trigger('click'); 
    $('#showPackages').trigger('slideDown'); 
} 

Answer 2

Hãy thử

chương trình này và ẩn có thể được thực hiện với hiệu ứng khác nhau

• hide() và show()
• fadeIn(), fadeOut() và fadeToggle ()
• slideUp(), slideDown() và slideToggle()

* Trong trường hợp của bạn, bạn muốn trượt tác dụng vì vậy chỉ cần sử dụng slideToggle()

$('#submitBtn').on('click', function(){ 
 
//$('#dispPackages').slideToggle('slow') this will set display:block 
 
$('#dispPackages').slideToggle('slow').css("display","inline-block"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button id="submitBtn">clickhere</button> 
 

 
<div class="panel-group" id="dispPackages" style="display: none"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
 
     Collapsible Group 1</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
 
     Collapsible Group 2</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>