Javascript jQuery：单击一个页面，页面将转到顶部

我有两个按钮在我的网站上，他们应该显示内容时，有人点击按钮。但这个按钮并没有显示内容，而是将我带回页面顶部

jQuery代码

    /********************
     * Enable Vacature Dropdown
     * *****************/
     var vacatureClickHandler = $(function(){
       $(".vacatures li").on("click", "a", function(event){
            if(event.target.attr('id') == 'link-0'){
                $('#content-0').toggleClass('active').fadeToggle();
                event.preventDefault();
            } else if(event.target.attr('id') == 'link-1'){
                $('#content-1').toggleClass('active').fadeToggle();
                event.preventDefault();
            }
        });
    });
    $(".vacatures li").on("click", "a", vacatureClickHandler);

用于jQuery的HTML

<div class="section vacatures">
    <h2>VACATURES</h2>

    <h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
    <ul>
        <li>
            <a id="link-0" href=""><span>OPEN SOLLICITATIE</span><span><img src="../../img/arrow_down.png"</span></a>
            <p id="content-0">Blablabla</p>
        </li>
        <li>
            <a id="link-1" href=""><span class="strike">ALLROUND DESIGNER</span><span class="hired">HIRED!</span><span><img src="../../img/arrow_down.png"/></span></a>
            <p id="content-1">Blablabla</p>
        </li>
    </ul>
</div>

度假
OP ZOEK NAAR NIEUWE COLLEGA&apos；s


blabla


blabla

下面是它必须做的事情：有人单击下拉按钮，然后显示内容。

1）您忘了在

jsFiddle中包含jQuery

2） 放置

event.preventDefault（）超出您的
if-else
条件

3） 使用
this.id
而不是
event.target.attr（'id'）

单击函数的最终代码如下所示：

$(".vacatures li").on("click", "a", function (event) {
    event.preventDefault();
    if (this.id == 'link-0') {
        $('#content-0').toggleClass('active').fadeToggle();
    } else if (this.id  == 'link-1') {
        $('#content-1').toggleClass('active').fadeToggle();
    }
});

如果链接旁边只有一个兄弟姐妹，则不需要id，不需要“切换”，可以使用sibles（）方法。请参见以下内容（jsfiddle）：

JS

CSS

HTML


度假
OP ZOEK NAAR NIEUWE COLLEGA&apos；s


blabla


blabla



你的回答帮了我的忙，非常感谢。我能再问你一个问题吗？文本在第二个按钮上流动，如果文本溢出，我应该如何按下下一个按钮？
$('ul.nav > li > a').on('click', function(e){
    e.preventDefault()
    $(this).siblings().slideToggle();
})

.content {    
    display:none;
}

<div class="section vacatures">
    <h2>VACATURES</h2>

    <h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
    <ul class="nav">
        <li>
            <a href="/"><span>OPEN SOLLICITATIE</span></a>
            <p class="content">Blablabla</p>
        </li>
        <li>
            <a href="/"><span class="strike">ALLROUND DESIGNER</span></a>
            <p class="content">Blablabla</p>
        </li>
    </ul>
</div>