Question

我有一组div，我想使用jQuery的slideToggle（）方法使其可折叠/可扩展。默认情况下如何使所有这些div折叠？我想避免在页面渲染期间/之后显式调用每个元素上的slideToggle（）。

Answer 1

您必须为这些图层指定一个样式：display：none，以便在javascript渲染之前不显示它们。然后你可以毫无问题地调用slideToggle（）。例如：

<style type="text/css">
    .text{display:none}
</style>

<script type="text/javascript">
    $(document).ready(function() {    
        $('span.more').click(function() {
            $('p:eq(0)').slideToggle();
            $(this).hide();
        });
    });
</script>

<body>              
      <p class="text">
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>           
      </p>
      <span class="more">show</span>

Answer 2

你可能会做这样的事情：

$(document).ready(function(){
  $('div').hide();
});

Answer 3

您可以使用style =“display：none;”启动元素并且slideToggle（）将从那里获取它。

Answer 4

如前所述，在幕后应用CSS样式会导致禁用脚本的用户出现并发症。解决这个问题的方法是将您的元素声明为Anne所说的隐藏，或者将脚本中的CSS定义为要更改的函数，而不是将页面样式化（保持结构，样式和函数分离），然后使用toggleClass脚本的功能或自定义效果隐藏由jQuery定义的函数。

在jQuery中默认折叠slideToggle（）元素

4 个答案: