javascript - jQuery 点击切换同级

Question

当我单击某个链接时，我试图切换一些箭头，单击操作正在工作，但我无法使 sibling 切换。

知道我错过了什么吗。

谢谢

HTML 代码为:

<div class="box">
    <span class="info-box-title" >
            <i class="fa fa-thumbs-up"></i>
            <a class="toggle" href="#yeswebsite"> 
                <b>Website</b>: <?php echo $parsedJson1->website; ?>
            </a>
    </span>
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <div id="yeswebsite" class="hidden">
        <p>Informatiile privind pagina ta cuprind si adresa de website. Aceasta trimite vizitatorii direct pe siteul tau pentru a afla mai multe informatii. </p>
    </div>
</div>

jQuery 代码是

$("span>a.toggle").click(function () {
     console.log('it works');
     $(this).siblings(".arrow-up, .arrow-down").toggle();
});

Answer 1

$(this).siblings(".arrow-up, .arrow-down")查找 <a> 的 sibling 所需元素是 <span> 的同级元素.

<span class="info-box-title">
    <i class="fa fa-thumbs-up"></i> -------- $(this).siblings() <-+
    <a class="toggle"></a>         --------- $(this)--------------'
</span>
<div class="arrow-up">&#9650;</div>   ---- Required
<div class="arrow-down">&#9660;</div> ---- Required

使用.closest()找到父级，

$(this).closest('span').siblings(".arrow-up, .arrow-down").toggle();