jquery - 用于多个显示和隐藏的更高效的 jQuery

Question

我想要多个可以通过 slideDown / slideToggle 等显示/隐藏的 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');
});

示例小提琴

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

Answer 2

尝试这样的事情

JAVASCRIPT

        $(document).ready(function(){
            // hides the slickbox on clicking the noted link
            $('.slickbox1').click(function(){
                $('#slickbox1').slideToggle(400);
                return false;
            });

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

HTML

    <div class="wrap">
        <a href="#" class="slickbox1 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" class="slickbox1" title="click to close">close &uarr;</a></span>
        </div>
        <!-- END of .reveal-box.slickbox1 -->
    </div>
    <hr/>
    <div class="wrap">
        <a href="#" class="slickbox2 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" class="slickbox2" title="click to close">close &uarr;</a></span>
        </div>
        <!-- END of .reveal-box.slickbox2 -->
    </div>