jQuery点击切换兄弟姐妹

时间:2016-07-12 13:00:45

标签: javascript jquery html

当我点击某个链接时,我试图切换一些箭头,点击操作正在运行,但我无法让兄弟姐妹切换。

知道我错过了什么。

由于

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 Code是

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

1 个答案:

答案 0 :(得分:1)

$(this).siblings(".arrow-up, .arrow-down")找到<a>的兄弟姐妹,所需元素是<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();