특정 클래스 (핸들러)의 하위 요소에 대한 클릭 토글-jquery

Weaponx

부모를 클릭하면 특정 자식에게 영향을 주어야합니다 (스타일 전환).

핸들러로 토글 기능을 달성했습니다.

$(".p1").on({
    mouseenter: mouseEnter,
    mouseleave: mouseLeave
});
function mouseEnter() {
    $(this).css('border', 'solid 5px #999999');
}
function mouseLeave() {
    $(this).css('border', 'solid transparent 5px');
}
function handler1() {
    $(this).css('border', 'solid 5px #222222');
    $(this).off('mouseenter mouseleave');
    $(this).one("click", handler2);
}
function handler2() {
    $(this).css('border', 'solid transparent 5px');
    $(this).on({mouseenter: mouseEnter, mouseleave: mouseLeave});
    $(this).one("click", handler1);
}
$(".p1a").parent(".p1").one("click", handler1);
$(".pl").children(".p1").one("click", handler1); //this one doesn't work

http://jsfiddle.net/2czxN/4/

부모 (마지막 줄)를 클릭하여 자식에게 영향을주는 것을 제외하고는 모든 것이 작동합니다.

이 기능을이 기능에 어떻게 추가 할 수 있습니까?

Weaponx

다음은 최종 기능입니다 -http : //jsfiddle.net/2czxN/6/

자녀 (p1a) 또는 부모 (pl)를 클릭하더라도 100 % 정확하게 작동합니다.

$(".p1a").one("click", handler1);
$(".pl").one("click", handler1);

키는 모든 선택기 ( find, parent)를 $(this).

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jQuery : 하위 요소의 클래스에 대한 클릭 방지 : tr에서 페이지 리디렉션 특정 td를 제외하고 클릭

분류에서Dev

특정 메뉴 (링크) 클릭에 하위 메뉴를 토글합니다. Jquery

분류에서Dev

다른 div를 숨기거나 표시 할 때 클릭 한 요소의 jQuery 토글 클래스

분류에서Dev

JQuery 선택기에 대한 클래스의 모든 요소가 아닌 클래스의 일부인 특정 HTML 요소를 선택하는 방법

분류에서Dev

여러 구성 요소 클릭 핸들러의 반응 성능 [단일 클릭 핸들러 대 각 구성 요소에 대한 클릭 핸들러]

분류에서Dev

특정 클래스에 대한 스위프트 프로토콜?

분류에서Dev

jQuery의 이벤트 핸들러로 이것을 사용하여 클래스 토글

분류에서Dev

vue js에서 여러 요소에 대한 클래스를 토글하는 방법

분류에서Dev

내 jquery 토글 클래스가 한 번의 클릭으로 작동하지 않는 이유

분류에서Dev

요소 Jquery 외부에서 클릭했을 때 클래스를 토글하는 방법

분류에서Dev

클릭 이벤트에 대한 Jquery 스위치 클래스

분류에서Dev

클래스의 각 요소에 대한 특정 호버 추가

분류에서Dev

특정 div 내에서 발견 된 여러 요소의 클릭 toggleClass에 대한 jQuery

분류에서Dev

몇 개의 동일한 클래스에서 클릭 한 특정 클래스를 선택하십시오.

분류에서Dev

클릭 한 요소 jQuery의 소품에 대한 액세스

분류에서Dev

목록의 두 번째 하위 항목을 클릭하면 특정 요소에 클래스 추가

분류에서Dev

클래스 내의 클래스에 대한 클릭 핸들러를 어떻게 구현할 수 있습니까?

분류에서Dev

동일한 요소 충돌에 대한 두 개의 클릭 핸들러

분류에서Dev

VUEJS에서 클릭하면 여러 카드에 특정 토글 만 표시

분류에서Dev

아래 요소에 대한 Vue 2 토글 클래스

분류에서Dev

단일 요소에 대한 여러 클릭 핸들러

분류에서Dev

jQuery를 사용하여 동일한 클래스 내에서 하나의 요소 만 대상으로 지정

분류에서Dev

다중 클래스 요소의 특정 클래스 요소에 대한 Dom 노드 인덱스 찾기

분류에서Dev

특정 값에 대한 하위 클래스 belongsTo 관계 설정

분류에서Dev

jQuery : 마우스를 가져 가서 클릭 할 때 버튼에서 동일한 특이성을 가진 클래스 토글

분류에서Dev

d3js : 요소를 클릭 한 후 CSS 클래스를 토글하는 방법

분류에서Dev

클래스 유형의 하위 클래스에 대한 메서드 정의

분류에서Dev

클래스 목록 토글은 div에 대한 클래스 이름을 추가 / 토글하지 않습니다.

분류에서Dev

특정 div 클래스에 대한 작업을 삭제하도록 jQuery 만들기

Related 관련 기사

  1. 1

    jQuery : 하위 요소의 클래스에 대한 클릭 방지 : tr에서 페이지 리디렉션 특정 td를 제외하고 클릭

  2. 2

    특정 메뉴 (링크) 클릭에 하위 메뉴를 토글합니다. Jquery

  3. 3

    다른 div를 숨기거나 표시 할 때 클릭 한 요소의 jQuery 토글 클래스

  4. 4

    JQuery 선택기에 대한 클래스의 모든 요소가 아닌 클래스의 일부인 특정 HTML 요소를 선택하는 방법

  5. 5

    여러 구성 요소 클릭 핸들러의 반응 성능 [단일 클릭 핸들러 대 각 구성 요소에 대한 클릭 핸들러]

  6. 6

    특정 클래스에 대한 스위프트 프로토콜?

  7. 7

    jQuery의 이벤트 핸들러로 이것을 사용하여 클래스 토글

  8. 8

    vue js에서 여러 요소에 대한 클래스를 토글하는 방법

  9. 9

    내 jquery 토글 클래스가 한 번의 클릭으로 작동하지 않는 이유

  10. 10

    요소 Jquery 외부에서 클릭했을 때 클래스를 토글하는 방법

  11. 11

    클릭 이벤트에 대한 Jquery 스위치 클래스

  12. 12

    클래스의 각 요소에 대한 특정 호버 추가

  13. 13

    특정 div 내에서 발견 된 여러 요소의 클릭 toggleClass에 대한 jQuery

  14. 14

    몇 개의 동일한 클래스에서 클릭 한 특정 클래스를 선택하십시오.

  15. 15

    클릭 한 요소 jQuery의 소품에 대한 액세스

  16. 16

    목록의 두 번째 하위 항목을 클릭하면 특정 요소에 클래스 추가

  17. 17

    클래스 내의 클래스에 대한 클릭 핸들러를 어떻게 구현할 수 있습니까?

  18. 18

    동일한 요소 충돌에 대한 두 개의 클릭 핸들러

  19. 19

    VUEJS에서 클릭하면 여러 카드에 특정 토글 만 표시

  20. 20

    아래 요소에 대한 Vue 2 토글 클래스

  21. 21

    단일 요소에 대한 여러 클릭 핸들러

  22. 22

    jQuery를 사용하여 동일한 클래스 내에서 하나의 요소 만 대상으로 지정

  23. 23

    다중 클래스 요소의 특정 클래스 요소에 대한 Dom 노드 인덱스 찾기

  24. 24

    특정 값에 대한 하위 클래스 belongsTo 관계 설정

  25. 25

    jQuery : 마우스를 가져 가서 클릭 할 때 버튼에서 동일한 특이성을 가진 클래스 토글

  26. 26

    d3js : 요소를 클릭 한 후 CSS 클래스를 토글하는 방법

  27. 27

    클래스 유형의 하위 클래스에 대한 메서드 정의

  28. 28

    클래스 목록 토글은 div에 대한 클래스 이름을 추가 / 토글하지 않습니다.

  29. 29

    특정 div 클래스에 대한 작업을 삭제하도록 jQuery 만들기

뜨겁다태그

보관