如何防止可折叠内容默认情况下不展开？

Question

可折叠内容默认情况下会扩展。 但我只想通过单击使其扩展。 如何在此处默认设置类似expand="false"的内容？

使用Javascript：

<script>
       $("#expand dt a").click(function () {
       $(this).parent().siblings("dd").slideToggle(); 
       });
</script>

HTML：

<dl>
  <dt class="right">
    <a href="#">
      <img src="img/more-button.png">
      <span class="learn">&nbsp;Learn More:Areas of Practise</span>
    </a>
  </dt>

  <!--collapsible content begins-->
  <dd class="row collapse">
    test
  </dd>
  <!--collapsible content ends-->

  </dt>
</dl>

Answer 1

只需设置style="display: none;" 在<dd>获取初始值。

如果最初显示该元素，则它将被隐藏； 如果隐藏，它将显示。 display属性将根据需要保存和恢复。

http://api.jquery.com/slidetoggle/

Answer 2

从DD中删除类“ collapse”，或将style =“ display：none”设置为DD

Answer 3

我会这样做：

1. 用$('dd').hide();隐藏所有元素
2. 单击任何'dt'项时，在'dt'下方切换下一项

也看看这个帖子

// Hide all dd elements to start with
    $('dd').hide();    
// When any dt element is clicked
$('dt').click(function(e){
    // All dt elements after this dt element until the next dt element
    // Will be hidden or shown depending on it's current visibility
    $(this).nextUntil('dt').toggle();
});

如果以这种方式进行操作，那么您也将不需要CSS类（例如collapse 。