하나 이상의 패널이있는 JQuery 슬라이드 패널

나는이 jquery 코드를 사용하여 클릭 할 때 내용을 슬라이드 할 수 있습니다. 이 코드는 작동하며, 더 간단한 방법이 있는지 알고 싶습니다. 나는 행운이없는 slice()를 시도했다. 토글하려는 각 항목에 대한 코드를 작성하지 않고도이 작업을 수행 할 수있는 방법을 찾으려고합니다.하나 이상의 패널이있는 JQuery 슬라이드 패널

감사합니다,

케빈

<script type="text/javascript"> 
    $("div.accord_panel").hide(); 
    $(document).ready(function() { 
     $("p.accord_header:eq(0)").click(function() { 

      $("div.accord_panel:eq(0)").slideToggle("slow"); 
      $("div.accord_panel:eq(1)").hide(); 
      $("p.accord_header:eq(1)").show(); 
     }); 
     $("p.accord_header:eq(1)").click(function() { 
      $("div.accord_panel:eq(1)").slideToggle("slow"); 
      $("p.accord_header:eq(0)").show(); 
      $("div.accord_panel:eq(0)").hide(); 
     }); 

    }); 
</script>

그리고 CSS :

p.accord_header 
    { 
     margin: 0; 
     padding: 0; 
     font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif; 
     color: #615E5A; 
     font-size: 9pt; 
     font-weight: bold; 
     background-color: #f3f0ed 
    } 
    div.accord_panel 
    { 
     margin: 0; 
     padding: 0; 
     font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif; 
     color: #615E5A; 
     font-size: 9pt; 
     display: none; 
     background-color: #f3f0ed 
    }

및 HTML :

<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br /> 
<br /> 
</strong></p> 
<strong> 
</strong> 
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br /> 
<br /> 
<br /> 
Julie Thomas // 425.881.6185</span><br /> 
</strong> 
</div> 
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br /> 
<br /> 
</strong></p> 
<strong> 
</strong> 
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br /> 
<br /> 
<br /> 
Julie Thomas // 425.881.6185</span><br />

출처

2011-03-08 Kevin

여기 당신의 대답이다. Jquery Tools, 사용하기 쉽고 ligthweight.

출처

2011-03-08 19:45:12

click 함수에 이벤트 인수를 전달하면 event.target 속성을 사용하여 클릭 된 요소를 가져올 수 있으며 모든 패널 요소를 위로 밀어 내면 해당 요소의 다음 .accord_panel 형제가 아래로 내려옵니다.

$("p.accord_header").click(function(e) { 
    $("div.accord_panel").stop(true, false).slideUp(); 
    $(e.target).closest('p').next('.accord_panel').stop(true, false).slideDown(); 
});

이것은 여러 헤더와 패널에서 작동합니다.

See example here.

출처

2011-03-08 19:55:01 mVChr

감사합니다. – Kevin

하나 이상의 패널이있는 JQuery 슬라이드 패널

답변

관련 문제