Question

我有一系列隐藏的div，我希望能够单独切换它们的可见性。

HTML：

        <h2>Section One</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

    <h2>Section Two</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

    <h2>Section Three</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

jQuery：

<script type="text/javascript">
   $(document).ready (function() {
     $('.video-holder').hide();
     $('.show-video').click(function () { 
     $('.video-holder').toggle('slow');
    });
   });
</script>

我很感激帮助他们一次切换一个。

感谢。

Answer 1

这是一个小技巧：

<script type="text/javascript">//<!--

   $(document).ready (function() {
     $('.video-holder').hide();
     var i = 0;
     $('.show-video').each(function(){
         $(this).click(function(){ 
             $('.video-holder:eq('+$(this).data('idf')+')').toggle('slow');
         });
         $(this).data('idf',i);
         i++;
    });
   });

// --></script>

使用数据等。

Answer 2

问题是jQuery是有用的，并且假设您想要使用video-holder类切换所有元素。（当您使用$('.video-holder').hide();隐藏每个视频持有者时，您会先使用该假设。

如果要绑定每个.show-video元素以仅显示紧随其后的视频，则需要使用jQuery的next()函数。所以你的代码看起来像这样：

$('.video-holder').hide();
$('.show-video').click(function () { 
     $(this).next('.video-holder').toggle('slow');
     /* 'this' contains the javascript object where the click occurred. 
         We wrap it in a jQuery object and then execute our functions on it */
});

Answer 3

听起来你想要来自jquery UI的accordion。

使用jQuery一次切换一个项目

3 个答案: