Как добиться этого простого эффекта в jQuery?

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

Вместо .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 2

Заменить

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

с

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

Edit: В случае, если у вас есть несколько комбо кнопка/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 3

Вы можете избавиться от $('.hiddenDiv').hide();, изменив свой стиль

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