Question

我正在尝试创建一个链接，单击该链接会在之前隐藏的div中显示一些信息。如果再次单击该链接，则会隐藏div。所以在其他方面，基本的切换功能。

在单击链接之前，锚文本为“显示详细信息”，一旦单击，锚文本将更改为“隐藏详细信息”。问题是，再次单击时，它不会更改回“显示详细信息”，它将保持“隐藏详细信息”。我怎样才能做到这一点？

这是我的代码：

<style type="text/css">
    .hiddenDiv { border: 2px solid #ccc; width: 500px; height: 300px; }
</style>

<script type="text/javascript">
    $(document).ready(function() {

        $('.hiddenDiv').hide();
        $('.button').click(function() {

            $('.button').html('Hide Details');
            $('.hiddenDiv').toggle();

        });

    });
</script>

<a href="#" class="button">Show Details</a>
<div class="hiddenDiv">
    <h2>Lacoste Shirt</h2>
    <p>This is a shirt with a small alligator logo sewen on the chest area.</p>

</div>

Answer 1

替换

$('.hiddenDiv').toggle();
$('.button').html('Hide Details');

与

$('.hiddenDiv').toggle();
$('.button').html($('.hiddenDiv').is(':visible') ? 'Hide Details' : 'Show Details');

编辑：如果您在页面上有多个按钮/ hiddenDiv组合（我怀疑），您需要这样做：

$(document).ready(function() {

    $('.hiddenDiv').hide();

    $('.button').click(function() {
        var $button = $(this);
        var $div = $button.next('.hiddenDiv');

        $div.toggle();
        $button.html($div.is(':visible') ? 'Hide Details' : 'Show Details');
    });

});

Answer 2

而不是.click()有一个.toggle()事件处理程序：

$('.button').toggle(function () {
   // First click, show
   $(this).html('Hide Details');
   $('.hiddenDiv').show();
}, function () {
   // Second click, hide
   $(this).html('Show Details');
   $('.hiddenDiv').hide();
});

或者，使用你的`.hiddenDiv'类 - 既可以显示/隐藏，也可以作为旗帜......

<style type="text/css">
    /* Note the display: none */
    .hiddenDiv { display: none; border: 2px solid #ccc; width: 500px; height: 300px; }
</style>

<script type="text/javascript">
    $(document).ready(function() {

        // Don't need this anymore: $('.hiddenDiv').hide();
        $('.button').click(function() {
            var toggleMe = $(this).next();
            // Don't need to show/hide anymore
            toggleMe.toggleClass('hiddenDiv');
            $(this).html(toggleMe.hasClass('hiddenDiv') ?
               'Show Details' : 'Hide Details');
        });

    });
</script>

Answer 3

您可以通过将样式更改为

来摆脱$('.hiddenDiv').hide();

.hiddenDiv { border: 2px solid #ccc; width: 500px; height: 300px; display:none; }

如何在jQuery中实现这个简单的效果？

3 个答案: