3

我将以下函数绑定到我创建的切换按钮，以隐藏/取消隐藏位于按钮下方但在 DOM 中的另一个级别的内容。

var togglelabel = packagehead.append("<div>").children().last().addClass("togglewrap").append("<label>")
        .children().last().addClass("toggle android header-toggle")
        .on('click', function(){
            $(this).parent().parent().next('.hidable').toggle();
        });

html结构如下所示：

<div>
    <div class="packageheader">
        <span>Package #1501</span>
        <div class="togglewrap">
            <label class="toggle android header-toggle">
                <input type="checkbox">
                <p>
                    <span>More</span>
                    <span>Less</span>
                </p>
                <a class="slide-button">
                </a>
            </label>
        </div>
    </div>
    <br>
    <p class="hidable">
        <pre>content here</pre>
    </p>
</div>

此代码无法<p>使用 class隐藏.hidable。我尝试使用 console.log() 来“调试”代码以查看“this”代表什么元素，并发现它确实代表了标签元素。

所以我认为使用以下链：

$(this).parent().parent().next('.hidable').toggle();

将正确地升到 2 级<div class="packageheader">，然后采用可隐藏类的下一个兄弟，这将是<p class="hidable">

这是结构的屏幕截图，以确保我没有遗漏任何内容： 在此处输入图像描述

4

1 回答 1

4

你可以这样做 ：

$(this).closest('.packageheader').nextAll('.hidable').first().toggle();

请注意，使用它稍微好一点closest，parent().parent()因为当 HTML 更改时它不会那么容易中断，并且维护人员更容易破译代码的作用。

另请注意，您的 HTML 无效，您不能PRE在P.

示范

于 2013-08-07T09:18:25.323 回答