2013-01-10 2 views
1

저는이 코드가 모든 'p'태그를 숨기는 코드를 작동시킨 다음 나머지 div 요소의 p를 전환하는 클릭 기능을 실행합니다.div의 첫 번째 요소를 표시하고 나머지를 숨기기

<div class="col"> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<ul> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
</ul> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>   
<div class="sub-content-btn">Find out more</div> 
</div> 
jQuery('.col').each(function() { 
    jQuery(this).find('p:not(:first)').hide(); 
    }); 

    jQuery('.sub-content-btn').click(function() { 
    jQuery(this).toggleClass('active'); 
    if(jQuery(this).hasClass('active')){ 
     jQuery(this).parent('.col').find('p').show(); 
    } else { 
     jQuery(this).parent('.col').find('p').hide(); 
     jQuery(this).parent('.col').find('p:first').show(); 
    } 
    }); 

어떻게 난 그냥 p 태그는, 모든 요소를 ​​전환하지 P 태그 및 UL 요소를 숨기려면이 코드를 수정할 수 있습니까? 문제의 사업부에는 ul이 포함됩니다.

답변

2

이는 일이

jQuery('.col').each(function() { 
    var $this= jQuery(this); 
    $this.find(':not(p:first, .sub-content-btn)').hide(); 

}); 

jQuery('.sub-content-btn').click(function() { 
    var $this= jQuery(this); 
    var $parent= $this.parent('.col'); 
    $this.toggleClass('active'); 
    if($this.hasClass('active')){ 
    $parent.find('p').show(); 
    } else { 
    $parent.find('p').hide(); 
    $parent.find('ul').hide(); 
    $parent.find('p:first').show(); 
} 
}); 
+0

감사를보십시오. 내가 할 필요가있는 것은 $ this.parent ('. col')를 추가하는 것이다. find ('p'). show(); if 문 hasClass 'active'. – Rob

+0

cool .. 행복한 코딩 .. :) – bipen

0

이 시도 :

jQuery('.col').each(function() { 
    jQuery(this).find(':not(p:first, .sub-content-btn)').hide(); 
}); 

jQuery('.sub-content-btn').click(function() { 
    var $btn = jQuery(this); 
    $btn.toggleClass('active'); 
    if ($btn.hasClass('active')) { 
    $btn.siblings().show(); 
    } else { 
    $btn.siblings().not('p:first').hide(); 
    } 
}); 

Example fiddle

관련 문제