javascript - 如何在 Javascript 中获取兄弟元素 (div)？

Question

所以我有这个 HTML:

<div class="tip-box">
    <div class="tip-title" onclick="toggleTip()">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

还有这个 Javascript:

function toggleTip() {
    $(this).siblings(".tip-content").toggleClass("hidden");
}

希望这应该做什么是显而易见的，但它不起作用。使用 .siblings() 似乎无法以这种方式工作。

正确的解决方案是什么？要获取特定类型或特定类别的下一个 sibling ，然后隐藏/显示它？

Answer 1

您可以使用 Jquery 函数。

<div class="tip-box">
    <div class="tip-title">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

$(document).ready(function(){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

你也可以用这个

<div class="tip-box">
    <div class="tip-title" onclick="toggloTip(this)">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>


<script>
function toggloTip(elm) {
    $(elm).siblings(".tip-content").toggleClass("hidden");
}
</script>