Question

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

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>

以下是jsFiddle，它必须做什么：有人点击下拉按钮，然后显示内容。

Answer 1

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();
    }
});

<强> Updated Fiddle

Answer 2

如果链接旁边只有一个兄弟，则不需要id，不需要“切换”并可以使用siblings（）方法。看到这个（下面的jsfiddle）：

JS

$('ul.nav > li > a').on('click', function(e){
    e.preventDefault()
    $(this).siblings().slideToggle();
})

CSS

.content {    
    display:none;
}

HTML

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

http://jsfiddle.net/josfaber/W835D/

jQuery：点击a，页面转到顶部

2 个答案: