如何隐藏和显示div onclick链接

277

萨加尔·辛格（Sagar Singh）

我有一个div，当我单击链接时默认情况下将其隐藏，然后显示div。例如

<a href="#expe1" class="fa fa fa-times closer" ></a> //this is the link
<div class="resume" id="expe1"></div> // this div is hidden by default

这是jQuery部分

jQuery(document).ready(function($) {
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    target.show();
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 2000);
    }

});
});

现在我想隐藏显示的div，所以我在该div前面创建了另一个链接

<div class="resume" id="expe1"></div><a href="#expe1">x</a>

这是jQuery代码

jQuery(document).ready(function($) {
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );
    target.hide();
    });
});

但这不能正常工作，因为上面显示的第一个jquery首先被处理，然后是最后一个..有没有更好的方法来隐藏该div，因为我有很多这样的div

洛格兹

Codepen演示

<a href="#expe1" class="fa fa fa-times closer" >Link1</a>  
<div class="resume" id="expe1">Open Block 1</div>  

<a href="#expe2" class="fa fa fa-times closer" >Link2</a>  
<div class="resume" id="expe2">Open Block 2</div>  

<a href="#expe3" class="fa fa fa-times closer" >Link3</a>  
<div class="resume" id="expe3">Open Block 3</div>

JS：

 $('.resume') .hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
    var target = $(this).attr('href');

    $('.resume'+target).toggle();

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。