기능에 대한 또 다른 jQuery 멍청한 질문

Question

작은 독립형 스 니펫을 작성하는 대신 더 많은 jQuery 코드를 "기능"하고 싶습니다. 여기 예입니다. 내가 트리거로 사용하고 싶은 Li가 있다고 가정 해 봅시다.

<li class="alpha-init" id="a-init">A</li>
<li class="alpha-init" id="b-init">B</li>
<li class="alpha-init" id="c-init">C</li>

그리고 내가 트리거 클릭에 따라 숨기고 보여주고 싶은 몇 가지 사항은 다음과 같습니다.

<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul id="b-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<ul id="c-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

각 케이스에 대해 약간의 스 니펫을 쓰고 싶다면 다음을 수행 할 수 있습니다.

$('li.alpha-init #a-init').click(function(){
    $('ul#a-sub').slideToggle(200);
}

그러나 그것은 링크와 하위 메뉴 세트만큼 많은 스 니펫을 쓰는 것을 의미합니다. 이것을 함수에 어떻게 쓸 수 있습니까? 나는 "하루 동안 먹는 것"을 찾고 있지 않기 때문에 글을 쓰는 것만 큼 많은 설명이 크게 높이 평가 될 것입니다. 매우 감사합니다!

Answer 1

$('li.alpha-init').click(function(){
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200);
}

Answer 2

사용을 고려 했습니까? jQuery UI 탭 이것을 위해? 그것은 당신이 원하는 것과 거의 똑같이 들립니다. 기본값과 다르게 탭을 스타일링 할 수 있습니다!

Answer 3

우선, ID는 귀하의 페이지에서 고유해야합니다. 선택기 만 사용하면됩니다 $('#a-init') 액세스하기 위해.

나는 (각 항목에 대해)와 같은 글을 쓸 것입니다.

HTML :

<li class="alpha-init" id="a-init">
<div>A</div>
<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</li>

그런 다음 jQuery를 다음과 같이 씁니다.

$('li.alpha-init').click(function(){
    $(this).children('ul.alpha-popdown').slideToggle(200);
}

기본 아이디어는 $ (this) 메소드를 사용하여 클릭 한 항목에 액세스하고 상위 요소와 관련하여 메뉴 요소를 선택하는 것입니다.

Answer 4

나는 Artem Barger와 John Sheehan의 코드의 조합을 사용했습니다. 도움을 주셔서 감사합니다. 이제 나는 잠들게된다!