Question

我希望有多个div可以通过slideDown / slideToggle等显示/隐藏

目前，脚本标记中的jQuery引用了每个ID，我确信这是一种更有效的方法（并且拥有它以便脚本标记中的jQuery可以提供任何关于可切换的div）< / p>

<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

正如您在小提琴中看到的那样，在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>

更高效的jQuery用于多个节目和隐藏

2 个答案: