Question

我一直试图隐藏并在我的网站上使用javascript显示div。但我希望它默认隐藏，并能够在点击时显示和隐藏它。我的代码似乎没问题，当我点击按钮时，显示：无;变成一个显示器：块;但div没有显示...

这是HTML

<div class="col-lg-8 col-lg-offset-2 text-center">
    <button href="#collapse1" class="nav-toggle">Show</button>
</div>

<div class="col-md-3 col-sm-4 col-xs-12 portfolio-item" id="collapse1" style="display:none">
    <img src="img/myimage.jpg" class="img-responsive" />
</div>

这是JS

// Show or hides div
$(document).ready(function() {
    $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
                //change the button label to be 'Show'
                toggle_switch.html('Show');
          }else{
              //change the button label to be 'Hide'
              toggle_switch.html('Hide');
          }
        });
    });

});

And here's the example on my website

Answer 1

我检查了你的网站，我发现它改变了状态，显示/隐藏＆＃34;在按钮上以及删除样式或将其添加到隐藏的div，但是您的图像宽度和高度为0 ...

也许是这样的？

<img src="http://iampox.com/img/portfolio/Visuel_JPO_ESTEN_thumbnail@2x.jpg" class="img-responsive" alt="Visuel JPO ESTEN 2014" width="100%" height="100%" />

这里有简化的JS小提琴，因为你问过＆＃34;如何显示/隐藏div＆＃34;在您的问题中，所以我使用了一个按钮和隐藏的内容，仅用于示例演示。也许你可以将你的脚本最小化到这样的东西。

JS Fiddle Sample

$('#btn').on('click', function () {
    var btnText = ($(this).text() == 'Show') ? 'Hide' : 'Show';

    $(this).text(btnText);
    $('#content').toggle();
});

隐藏div并使用js显示onclick

1 个答案: