Question

我有一个默认隐藏的div当我点击链接然后显示div。例如

loadonce: true

这里是jquery部分

loadonce: true

现在我想隐藏我展示的那个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);
    }

});
});

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

Answer 1

Codepen Demo

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

如何隐藏和显示链接的div onclick

4 个答案: