Question

我正在看的codepen就是这个。 http://codepen.io/candygong/pen/OMZqNZ

我想知道如何让标题彼此分开工作（例如，当你单击一个时，另一个不会向下滑动。）我知道我可以为每个标题分配单独的类但我想知道该怎么做它更有效率，因为我计划尝试使用许多不同的标题，所以我想使用相同的类而不是为每个实例创建一个类。

HTML代码

<section>
<h1 class="question">q: what is this: hahahahplop?</h1>
<p class="answer"><span>a: someone laughing their head off!</span></p>
</section>

<section>
<h1 class="question">q: what is this: hahahahplop?</h1>
<p class="answer"><span>a: someone laughing their head off!</span></p>
</section>

CSS代码

* {
margin: 0px;
padding: 0px;
}

body {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #555;
}

section {
width: 5in;
margin: 24px auto;
text-align: center;
}

section h1.question {
color: white;
background-color: purple;
padding: 24px;
font-weight: 500;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

section p.answer {
border: 1px gray solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:36px 0px;
}

Javascript代码

$(function() {
console.log("ready");

$('section p.answer').hide();
$('section p.answer span').hide();

$('section h1.question').click(function(){

$('section p.answer').slideToggle();
$('section p.answer span').fadeToggle();
})
});

我知道您应该可以使用此关键字，但我无法让自己工作。

Answer 1

因为有两个不同的“部分p.answer”对象，您需要在点击时获得正确的对象：

$(function() {
  //hide the answer
  $('section p.answer').hide();
  $('section p.answer span').hide();
  //listen for a click on the question: same event attached to more objects
  $('section h1.question').click(function(e){
    // get the only one parent on which you clicked
    var sectionObj = $(this).parent('section');
    
    // act only on the corresponding children
    sectionObj.find('p.answer').slideToggle();
    sectionObj.find('p.answer span').fadeToggle();
  })
});

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: #555;
}

section {
  width: 5in;
  margin: 24px auto;
  text-align: center;
}

section h1.question {
  color: white;
  background-color: purple;
  padding: 24px;
  font-weight: 500;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

section p.answer {
  border: 1px gray solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding:36px 0px;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<section>
    <h1 class="question">q: what is this: hahahahplop?</h1>

    <p class="answer"><span>a: someone laughing their head off!</span></p>
</section>

<section>
    <h1 class="question">q: what is this: hahahahplop?</h1>

    <p class="answer"><span>a: someone laughing their head off!</span></p>
</section>

Answer 2

问题在于选择要显示/隐藏的元素：选择不需要的元素，修复问题通过this访问它们并在点击处理程序中使用siblings method，所以基本上你必须从：

中替换点击处理程序中的行

$('section p.answer').slideToggle();
$('section p.answer span').fadeToggle();

到

$(this).siblings('p.answer').slideToggle();
$(this).siblings('p.answer span').fadeToggle();

请参阅code pen

上的工作代码段

如何在此codepen中单独使用标题

2 个答案: