jQuery 전파하고 여러 클래스

Question

----업데이트

내가 조금 어리석,아이 UL 의 덮고 있던 부모 목록(불투명 페이드 아웃),수 없습니다 그래서 클릭 후 나는 그들을 클릭 한 번입니다.Oops!어쨌든 저를 도와 주셔서 감사합람!

---

문제 jQuery 전파 무언가가 모든 사람은 레슬링이다.하지만 여기에 제 경우는 어디에서도 찾을 수 있게 해결(또는 어쩌면 나는 바보 같지 오른쪽에 보이는 장소 또는 내 jQuery 기술이 그냥 좋지 않고 충분히 이해하).

기본 경우에는 일부 그룹과 그룹에서 몇 가지 옵션이 있습니다.을 클릭하면 그룹 중 하나로,이 옵션이 나타납니다.하지만,때 나는 옵션 중 하나를 클릭합체 팝업 활동은 화재 다시기 때문에,그것은 자녀의 부모로,그래서 그가 인식하는 이들이 사로 잡았습니다.

내 HTML 다음과 같습니다:

<div id="buttons">
        <ul>
            <li class="group">Group 1
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 2
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 3
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 4
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
        </ul>
</div>

나는 아주 간단하고은 잘못이 없다는 가정하자.그것은 목록에 중첩을 나열합니다.

그러나 내 jQuery 코드입니다.그것은 다음과 같습니다:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);

    /*
    $(".link").click(function(event) {
        event.stopPropagation();
    });
    */

});

실제로 그것이 무엇이:

1. 다시 설정하면 그룹들을 기본값으로 최고의 위치
2. 을 받고를 클릭한 그룹
3. 을 받고 높이의 총 아이 ul 의 대상 그룹
4. 준비하는 거리에 대한 애니메이션
5. 발 애니메이션

오고 아무 문제가 없다와 함께하는 모든 작품으로 나가고 싶어하지만,클릭할 때에 lis 내 uls,그것은 그냥 계속 발생 애니메이션과하지 않는 부분의 계획이다.

나는 주석으로 2 블록의 코드는 당신이 발견 할 수 있습니다.은 2 가지 방법으로 제어하기 위한 전파하는 동안 내가 찾 걸림돌 인터넷에 대한 상대적인 문제를 대답이다.모두에게 좋은 결과는 하지만입니다.무슨 일이 전파하는 실제로 중지이지만,그것은 또한 수 없을 클릭한 다양한 그룹.

문제입니다 간단히 말해서.나는 생각해야 하나 또는 두 개의 라인을 추가,하지만 난 그냥 생각할 수 없다 무엇을 해야에 맞게,거의 모든 것을 시도는 나의 마음입니다.

또한,을 찾을 수 없는 경우 어떠한 답변도 하지만 일부 의견 코드에 태그나 뭔가를,그것은 또한 에 오신 것을 환영합니다(난에서 학생 상호작용 설계/웹 개발,그래서 나는 감사하는도:))

Answer 1

설치하지 않아야 합 클릭 처리기에 .group 지만에 전환 요소입니다.

<li class="group">
    <a class="toggle">Group 2</a>
    <ul>
        <!-- contents to show & hide -->
    </ul>
</li>

$(".toggle").click(function(e) {
    $(this).next()... // to reference the ul
})

Answer 2

동은 다음 코드의 외부에서 .group 클릭 처리기:

$(".link").click(function(event) {
    event.stopPropagation();
});

전체 코드:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);
});


$(".link").click(function(event) {
   event.stopPropagation();
});

Answer 3

나는 대체 방법의 click 청취자 수 있습니다.당신이 사용하는 경우 on 방법 에 jQuery-을 위임할 수 있는 수신기 아이에게 요소입니다.그래서 다음과 같:

$('#buttons').on('click', 'li', function(e){
    var li = $(this);

    if(li.hasClass('group')){
        alert('group was clicked');
    }
    else if(li.hasClass('link')){
        alert('link was clicked');
        e.stopPropagation();
    }
});

라이브의 예를 이 코드는 여기에 있습니다- http://jsfiddle.net/skip405/YWzxB/

주의 사항:을 삭제하시는 경우 stopPropagation 부에 link 표-당신이 볼 수 있습니다 두 개의 경고합니다.처음에 대한 link 다음 group.