jquery - 更高效的 jQuery 进行多重显示和隐藏

Question

我想要多个可以通过slideDown/slipToggle等显示/隐藏的div

目前，脚本标签内的 jQuery 引用每个 ID，我确信有一种更有效的方法来做到这一点(并且拥有它，以便脚本标签内的 jQuery 可以为任何可切换的 div 提供服务)

http://codepen.io/richerimage/pen/HFqJm

<div class="wrap">

<a href="#" id="slick-toggle1" class="text-center reveal">Click to Reveal</a>

<div id="slickbox1" class="reveal-box" style="display: none;">

  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p>  
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 

<span class="slick-hide-holder"><a id="slick-hide1" title="click to close">close &uarr;</a></span>

</div><!-- END of .reveal-box.slickbox1 -->

</div>

<hr />

<div class="wrap">

<a href="#" id="slick-toggle2" class="text-center reveal">Click to Reveal</a>

<div id="slickbox2" class="reveal-box" style="display: none;">

  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p>  
  <p>Now you see me, now you see me, now you see me, now you see me, now you see me, now you see me, now you see me.</p> 

<span class="slick-hide-holder"><a id="slick-hide2" title="click to close">close &uarr;</a></span>

</div><!-- END of .reveal-box.slickbox2 -->

</div>

<script type="text/javascript">

$(document).ready(function() {

        // hides the slickbox as soon as the DOM is ready
        $('#slickbox1').hide();

        // hides the slickbox on clicking the noted link
        $('#slick-hide1').click(function() {
          $('#slickbox1').slideUp('fast');
          return false;
        });

        // toggles the slickbox on clicking the noted link
         $('#slick-toggle1').click(function() {
          $('#slickbox1').slideToggle(400);
          return false;
        });


  // hides the slickbox as soon as the DOM is ready
        $('#slickbox2').hide();

        // hides the slickbox on clicking the noted link
        $('#slick-hide2').click(function() {
          $('#slickbox2').slideUp('fast');
          return false;
        });

        // toggles the slickbox on clicking the noted link
         $('#slick-toggle2').click(function() {
          $('#slickbox2').slideToggle(400);
          return false;
        });

});

</script>

Answer 1

利用现在的类结构，您可以将代码简化为:

$('.wrap').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).closest('.wrap').find('.reveal-box').slideToggle('fast');
});

Example fiddle

正如您在 fiddle 中看到的，在 wrap 元素中使用类和遍历意味着此代码将适用于无限数量的 wrap 组。