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

删除课程＆＃34;崩溃＆＃34;来自DD或set style =＆＃34; display：none＆＃34;到DD

Answer 3

我会这样做：

使用$('dd').hide();
点击任何'dt'项后，切换'dt'

另请查看this post

// 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。

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

3 个答案: