jQuery 페이드 옵션을 사용하여 요소를 보이거나 숨길 때 페이지가 맨 위로 올라가지 않게하는 방법

Question

많은 질문이 있으며이를 시도해 보았습니다. 나는 아래의 jQuery를 사용하여 목록을 된 div를 숨기고 보여 jQuery를 fadeIn 및 페이드 아웃 옵션을 사용하고 있지만, 페이지 상단에 점프 유지

을하려고하고있는 무슨

. 표시되는 목록은 동적입니다.

e.preventDefault();과 return false;으로 시도했지만 사용하지 않았습니다.

태그를 확장하기 위해 앵커 태그를 변경했지만 두 번째 onClick 함수가 작동하지 않습니다.

내 콘텐츠 길이가 동적이기 때문에 점프처럼 보이게하거나 실제 점프입니까?

미리 감사드립니다.

HTML

<div id="action_bar"> 
    <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div class="total">20</div></div> 
    <a href="" id="nav">CATEGORIES</a> 
    <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i><div class="total">1</div></div> 
</div> 

<div id="content"> 
    <div id="category1" class="category" data-categories="SPL"> 
     <img src="images/c_w.png"><div class="category_description">Chef's Special</div> 
    </div> 

    <div id="category2" class="category" data-categories="LCH"> 
     <img src="images/l_w.png"><div class="category_description">Lunch</div> 
    </div> 

    <div id="category3" class="category" data-categories="SNK"> 
     <img src="images/s_w.png"><div class="category_description">Snacks</div> 
    </div> 

    <div id="category4" class="category" data-categories="DNR"> 
     <img src="images/d_w.png"><div class="category_description">Dinner</div> 
    </div> 
    <ul class="items"> 
     <!-- Menu List --> 
    </ul> 
</div> 

JS

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('body').on('click', '.category', function(){ 
     var category = $(this).data('categories'); 
     //alert(category); 
     $('.category').fadeOut(300); 
     $.ajax({ 
       type: "POST", 
       url: "./assets/listproducts.php", 
       data: {cat: category}, 
       cache: false, 
       success: function(response){ 
        //console.log(response); 
        $('#nav').html('<- BACK').addClass('back'); 
        $('.items').html(response).delay(400).fadeIn(300); 
       } 
     }); 
    }); 

    $('.back').on('click', function(e){ 
     $('.items').fadeOut(300); 
     $('.category').html(response).delay(400).fadeIn(300); 
     $('#nav').html('CATEGORIES').removeClass('back'); 
     e.preventDefault(); 
    }); 
}); 
</script> 

CSS

ul.items 
{ 
    padding:0; 
    margin:0; 
    display:none; 
} 

당신의 click 이벤트 있다면 의심

Answer 1

on .back은 이벤트가 바인드 될 때부터 .back이 존재하지 않기 때문에 전혀 등록되지 않았습니다. 따라서 아무런 href도없는 링크를 클릭하는 것만 큼 좋습니다.

.back을 document으로 위임해야합니다. 이 위임은 back 클래스를 동적으로 추가하기 때문에 필요합니다.

$(document).on('click','.back', function(e){ 
     e.preventDefault(); 
     $('.items').fadeOut(300); 
     $('.category').html(response).delay(400).fadeIn(300); 
     $('#nav').html('CATEGORIES').removeClass('back'); 

    }); 

Answer 2

html5에서해야 할 일은 href 속성이없는 앵커 태그를 사용하는 것입니다. CSS에서는 cursor: pointer을 사용하여이를 보완 할 수 있습니다. 그러면 JavaScript에서 갑자기 더 이상 필요가 없습니다. event.preventdefault

Answer 3

두 번째 .back onclick이 실행되지 않습니다.

a 또는 span과 같이 작동하지 않습니다. a 일 때 기본 클릭이 실행되어 상단으로 이동합니다.

$('.back').on('click'..)으로 전화를 걸면 요소가 아직까지 해당 클래스를 다시 버튼에 추가하지 않았기 때문에 연결할 수 없기 때문입니다.https://stackoverflow.com/a/1688293/2181514

가 최대 이벤트 와이어를 변경

:

당신은 이벤트 위임을 사용할 필요가 동적으로 변경 클래스

을 픽업 할

$("document").on("click", ".back", function.... 

Answer 4

해키 솔루션에 href="#/"을 설정하는 것입니다 앵커 태그는 작동 할 것입니다. 그러나 앵커 태그를 사용하지 않아도됩니다 (<a>를 사용하는 경우 클릭 가능한 링크가 있어야합니다)는 SEO에 적합하지 않습니다.

또한 e.preventDefault()을 사용할 수 있지만 다시 클릭 할 때뿐만 아니라 모든 기능에 사용할 수 있습니다.

그러나 더 나은 방법은 <input type="button" />을 사용하는 것입니다. 점핑 문제를 제거하고 더 나은 SEO를 수행하십시오.