0

所以我试图使用 .closest 函数并且遇到了问题，所以我选择了别的东西，但这让我很难过，所以试图弄清楚。

这是html：

 <div class="faqW">
        <div class="faqQues2"> the question goes here </div>
        <br/>
        <div class="faqAns2"> answere to faq question here.</div>
    </div><!-- faq wrap ender -->

这是隐藏答案的CSS（完成后将更改为js隐藏）

.faqAns2{
    background-color:#CC6;
    color:black;
        display:none;
}

这是我试图使用的 jq ：

var question = $('.faqQues');
var answer = $('.faqAns');
var question2= $('.faqQues2');

（不同的尝试没有结果）

尝试1：

question2.click( function(){
    $(this).parent().next('.faqAns2').slideToggle(500); 
});

或者

question2.click( function(){
    $(this).parent('.faqW').next('.faqAns2').slideToggle(500);  
});

尝试2：

    question2.click( function(){
    $('.faqW',$(this)).closest('.faqAns2').slideToggle(500);    
});

尝试3：

    question2.click( function(){
$(this).next('.faqAns2').slideToggle(500);  
});

我尝试了很多方法，包括重新排列 .parent 的 html 等，但无济于事。

我想要的是，当单击问题时，会切换显示最接近的答案。

我无法弄清楚我做错了什么。

先谢谢了。

4

3 回答 3

1

如果您遍历父元素，则.next()匹配元素的直接兄弟。

要搜索您的孩子，.faqW可以使用，或搜索您可以使用.find()的下一个答案，它不仅搜索直接兄弟，而且获取所有匹配的兄弟。.faqQues2nextAll()

$.find() - http://jsfiddle.net/urLqE/：

question2.click( function(){
    $(this).parent().find('.faqAns2').slideToggle(500); 
});

​</p>

$.nextAll() - http://jsfiddle.net/urLqE/1/：

question2.click( function(){
    $(this).nextAll('.faqAns2').slideToggle(500); 
});
于 2012-06-12T01:02:49.553 回答
1

您需要使用两个 next 调用，因为 next 将只返回直接的下一个兄弟，如果给定，它与选择器匹配。在这里，答案 div 是问题之后的一个 DOM 节点。

question2.click( function(){
    $(this).next().next('.faqAns2').slideToggle(500);  
});​

详细了解 DOM 遍历函数http://api.jquery.com/category/traversing/

于 2012-06-12T01:00:32.120 回答
1

'.closest(selector)' 沿着祖先链向上并找到与选择器匹配的第一个祖先。

.next(selector)查看下一个元素并仅当它与选择器匹配时才返回下一个元素。它不会寻找与选择器匹配的下一个元素，无论它有多远。如果下一个元素与选择器匹配，它只会返回一些东西。

从一个问题中，要在保存 div 中获得下一个答案，您可以这样做：

.nextAll('.faqAns2')

nextAll 将获取与 jQuery 对象中元素之后的选择器匹配的所有兄弟姐妹。

对于您的具体问题，我认为这将起作用：

question2.click( function(){
    $(this).nextAll('.faqAns2').slideToggle(500); 
});

或者，如果您使 HTML 更通用，则可以对所有问题和答案使用相同的 jQuery：

<div class="faqW">
    <div class="faqQues"> the question goes here </div>
    <br/>
    <div class="faqAns"> answere to faq question here.</div>
</div><!-- faq wrap ender -->

和 jQuery：

$('.faqQues').click(function() {
    $(this).nextAll('.faqAns').slideToggle(500);
});

由于每个问答对都限制在自己的 div 中，因此您也可以这样做：

$('.faqQues').click(function() {
    $(this).closest('.faqW').find('.faqAns').slideToggle(500);
});
于 2012-06-12T00:56:31.213 回答