如何隐藏和显示div onclick链接

Question

我有一个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

Answer 1

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

});

Answer 2

您可以使用fadeToggle(); 或slideToggle();

 jQuery(document).ready(function($) { $('a[href^="#"]').on('click', function(event) { var target = $( $(this).attr('href') ); target.fadeToggle(100); /*if( target.length ) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 2000); }*/ }); }); 

 .resume{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#expe1" class="fa fa fa-times closer" >Click</a> <div class="resume" id="expe1">Something Here</div> 

Answer 3

请参见下面的示例代码

<span href="#" id="showItem">Show Div</span>
<span href="#" id="hideItem">Hide div</span>
<div id="item">to be covered</div>

    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">
        var divToHide = $('div#item');
        var hideBtn = $('span#hideItem');
        var showBtn = $('span#showItem');

        showBtn.click(function () {
            divToHide.show();
        });

        hideBtn.click(function () {
            divToHide.hide();
        });

        $(document).ready(function () {
            //alert();
            divToHide.hide();
        });
    </script>

Answer 4

你可以用jQuery做到这一点

$(document).ready(function(){
$(".test").click(function(){
    $("#showme").show();
   $("#tohide").hide();
});
});

的HTML代码是

<a href="#" class="test">Say Hi</a>
<div id="showme">Howdy</div>
<div id="tohide">fine</div>