Question

我有一些隐藏的部分，当点击箭头时会展开。箭头曾经是主要＆＃34; questionBlock＆＃34;的一部分。 div，所以我们使用$content = $arrow.siblings(.questionBlockExpand)来选择要展开的部分。但是现在有了一些必要的布局更改，箭头现在是标题的一部分，它位于另一个名为＆＃34; questionBlockTitle＆＃34;的div中。

我无法选择＆＃34; questionBlockExpand＆＃34;现在在父div 2级别内。

下面的JQuery代码是我尝试通过第二个父级别选择div的尝试之一。

我做错了什么？

感谢。

HTML：

<div class='questionBlock testing123 '>
    <div class='questionBlockTitle'><span class='sectionQuestionBlockNumber'>1</span><span class='sectionQuestionBlockTitle'>title text</span>
        <div class='expandArrow downArrow'>Expand Arrow Image</div>
    </div>
    <div class='questionBlockExpand'>Section to expand</div>
</div>

JQuery的：

$(".expandArrow").click(function () {

$arrow = $(this);
$content = $arrow.parent().parent(".questionBlockExpand");
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change class of header based on visibility of content div
    if ($content.is(":visible")) {
        $arrow.addClass("upArrowBlock");
        $arrow.removeClass("downArrowBlock");
    } else {
        $arrow.addClass("downArrowBlock");
        $arrow.removeClass("upArrowBlock");
    }
});

}）;

Answer 1

您可以使用closest()遍历容器questionBlock div使用find()

$content = $arrow.closest('.questionBlock ').find(".questionBlockExpand");

OR，

$content = $arrow.closest('.questionBlockTitle').next(".questionBlockExpand");
//$content = $arrow.parent().next(".questionBlockExpand");

OR

$content = $arrow.closest('.questionBlockTitle').siblings(".questionBlockExpand");
//$content = $arrow.parent().siblings(".questionBlockExpand");

选择父级内两个级别的div？

1 个答案: