Question

我正在为我们的SharePoint-Intranet开发一个小解决方案。因此，我需要一个典型的FAQ-Webpart，如

问题1

答案1

问题2

Answert 2

等等。

我希望通过点击问题来切换答案。默认情况下，所有答案都是隐藏的，当我点击一个问题时，会显示此问题的答案。

但它不起作用。

我的代码如下：

<div class="faqWebpartWrapper">
    <div class="faqContainer">
        <a class="faqFrage" href="#">Question 1</a><br />
        <span class="faqAntwort">Answer 1</span>
    </div>
     <div class="faqContainer">
         <a class="faqFrage" href="#">Question 2</a><br />
        <span class="faqAntwort">Answer 2</span>
    </div>
</div>

$(".faqAntwort").hide();

$(".faqContainer").on("click", ".faqFrage", function(event) {
    console.log("clicked");   
    $(this).find(".faqAntwort").show();
});

以下是jsfiddle的链接：http://jsfiddle.net/TJ22g/

我认为我的问题的解决方案很简单，但我对jquery不太熟悉（到目前为止！），所以如果有人能给我一个提示，我将不胜感激。

谢谢！

Answer 1

.faqAntwort不是.faqFrage的孩子，是其兄弟姐妹。您可以使用以下方法之一。

使用

 $(this).parent().find(".faqAntwort").show();

OR

 $(this).closest('.faqContainer').find(".faqAntwort").show();

OR

 $(this).siblings('.faqAntwort').show();

Answer 2

您可以使用 .siblings() ，因为.faqAntwort span是点击的.faqFrage锚点的兄弟：

$(".faqAntwort").hide();

$(".faqContainer").on("click", ".faqFrage", function(event) {
    console.log("clicked");   
    $(this).siblings('.faqAntwort').show();
});

<强> Updated Fiddle

Answer 3

使用next()方法，因为它是下一个兄弟：

$(this).next(".faqAntwort").show();

Answer 4

您可以使用最近的（），例如$(this).closest('.faqContainer').find(".faqAntwort").show();

jquery：在click事件中获取子元素

4 个答案: