jquery에서 많은 클래스를 사용하면서 선택기 유형을 선택하는 방법은 무엇입니까?

Question

포인트가있는 페이지를 만들려고합니다.

예 :

• POINT1
• POINT2
• POINT3

은 이러한 점의 각각은 그 다음 아래 그림이야, 우리가 포인트를 클릭 할 때까지, 숨겨진 텍스트를 가지고 그것.

jquery에서 slidetoggle 효과를 사용했지만 선택한 지점 만 홀로 표시되도록 지정하는 방법을 알지 못합니다. 자, 내가 그 중 하나를 누르면, 그들은 동시에 모두 열려 있습니다. 그래서

$(document).ready(function(){ 
$(".point").click(function(){ 
$(".explanation").slideToggle("fast"); 
}); 
}); 

, 어떤 아이디어 :

은이 코드를 사용?

고마워요. .explanation 요소가 .point 사용 당신은 포인트 클릭과 연결된 explanation 개체를 찾을 필요가 $(e.srcElement.parentNode)

Answer 1

의 아이가 아닌 경우

Answer 2

$(document).ready(function(){ 
    $(this).click(function(){ 
     $(this).children(".explanation").slideToggle("fast"); 
    }); 
}); 

Answer 3

는

$(document).ready(function(){ 
$(".point").click(function(e){ 
$(e.srcElement).children(".explanation").slideToggle("fast"); 
}); 
}); 

을 시도합니다. this을 사용하여 클릭 처리기 내에서 클릭 한 지점을 가져올 수 있습니다. explanation 객체가 관련이 어떻게 더 구체적인 대답을 원하는 경우

<div class="point> 
    other HTML here 
    <div class="explanation"> 
     This is the explanation for this point. 
    </div> 
</div> 

$(document).ready(function(){ 
    $(".point").click(function(){ 
     $(this).find(".explanation").slideToggle("fast"); 
    }); 
}); 

, 그래서 우리가 볼 수있는 HTML을 게시 : 당신은 당신이 내가하는 방법을 보여주는 예를 구성해야합니다 그래서 HTML 보이지 않았다 HTML의 point 개체로 이것은 설명이 포인트 객체 내부에 있다고 가정합니다. 형제라면 약간 다른 jQuery를 사용합니다.

Answer 4

그것은 여기에 당신의 도움 에 대한 :) 덕분에 많이 근무의 경우 사람의 코드가 필요하다 :

html로 코드 :

<h1 class="point">AAAA</h1> 
    <div class="explanation"> 
    <h3>XXXXX</h3> 
    <p>....</p> 
    </div> 

JQuery와 코드 :

$(document).ready(function(){ 
    $(".point").click(function(){ 
     $(this).next.slideToggle("fast"); 
    }); 
}); 

CSS :

div.explanation,h1.point 
    { 
     margin:0px; 
     padding:5px; 
     text-align:center; 
     background:#488AC7; 
     border:solid 1px #F6358A; 
    } 
    div.explanation 
    { 
     height:120px; 
     display:none; 
    }