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

Question

我正在尝试创建一个链接，单击该链接会显示以前隐藏的 div 内的一些信息。如果再次单击该链接，它将隐藏该 div。换句话说，这是一个基本的切换功能。

在单击链接之前， anchor 文本是“显示详细信息”，单击链接后， anchor 文本将更改为“隐藏详细信息”。问题是，再次单击时，它不会变回“显示详细信息”，而是停留在“隐藏详细信息”。我怎样才能实现这一目标？

这是我的代码:

<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

代替 .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>