jquery로 텍스트를 하나씩 아래로 슬라이드 업하는 방법은 무엇입니까?

Question

나는 2 개의 연결이있다 : category1과 category2. 마우스로 적절한 링크를 클릭하면 텍스트를 아래로 내리고 싶습니다. 예를 들어 누군가가 카테고리 1을 클릭하면 카테고리 1 컨텐츠를 아래로 내리고 싶습니다. 그리고 soneone이 카테고리 2를 클릭하면 category2 컨텐츠를 아래로 내리고 카테고리 1 컨텐츠를 닫고 싶습니다. 또한 카테고리 1과 카테고리 2 모두에서 링크를 슬라이드하고 싶습니다. 사용자가 해당 항목을 클릭하면 해당 카테고리 (즉, 닫기 컨텐츠)를 위로 밀어 넣고 싶습니다. 어떻게해야합니까? 미리 감사드립니다.

Answer 1

HTML을 게시하지 않았으므로, 메뉴에 관해서는 다소 "표준"인 마크 업을 사용하고 있다고 가정합니다.

jQuery(function($) { 

    var $menu = $('#menu'), 
     $menu_items = $menu.children('li') 
     ; 

    $menu_items.click(function() { 

     $menu_items.not(this).slideUp(); 
     $(this).slideDown(); 

    }); 

}) 

이 : 같은 것을 사용하여, (내가 이해에서)

<ul id="menu"> 
    <li>Category 1 
     <ul><!-- links --></ul> 
    </li> 
    <li>Category 2 
     <ul><!-- more links --></ul> 
    </li> 
    <!-- ... and so on -->  
</ul> 

당신은 당신이 원하는 것을 얻을 수 있습니다

그래서 당신은 다음과 같은 마크 업의 야구장 내에있어 가정 방법을 사용하면 #menu에서 메뉴 항목을 추가/제거 할 때 코드를 추가/변경할 필요가 없습니다.

Answer 2

당신은 더 특정하기 위해 필요한 경우이

$("#category1").click(function(){ 
$("#category2content").animate({"height","0"},normal,linear,function(){$("#category1content").animate({"height","500"},normal)}); 
}); 

$("#category2").click(function(){ 
$("#category1content").animate({"height","0"},normal,linear,function(){$("#category2content").animate({"height","500"},normal)}); 
}); 

당신이 여분의 기능을 추가 할 수 있습니다 사용할 수 있습니다. 필요한 경우 내부 내용 용으로 재사용 할 수 있습니다.

자세한 내용은 을 참조하십시오. 500을 필요한 높이로 변경하십시오.