推特引导。折叠子元素

Question

假设我们有一个缩略图：

<div class="thumbnail">
    <img alt="" src="http://placehold.it/260x180" />
    <div class="details">
        <h5>Heading</h5>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-shopping-cart"></i></a>
        <a class="btn" data-toggle="collapse" data-target="?" href="#"><i class="icon-eye-open"></i></a>
        <a class="btn" href="#"><i class="icon-edit"></i></a>
    </div>
</div>

是否可以使用属性折叠/切换父段落<p>？那么data-target 应该是什么样子？ 还有我想问一下是用data-attributes合理还是用Twitterjs API比较好？

Answer 1

关于使用data- 属性或API 是否“更好”，除非您有特定的用例，否则这个问题毫无意义。无论您是使用 data- 属性还是使用 API，都可以实现相同的目标 - 小部件的初始化和/或配置。

有些人不喜欢使用data- 属性，因此“更喜欢”使用 API，但对于外部观察者来说，实现者的偏好并不适用。同样，非程序员可能会发现使用data- 属性“更容易”，但同样，对于最终用户来说，设计师发现更容易的东西并没有什么区别，他们感兴趣的只是最终结果 - 小部件。

我最近确实有一个特定的用例，我必须使用 API - 我想在移动视图中显示手风琴（可折叠），而不是在应用程序的桌面视图中。如果我使用data- 属性来初始化和配置手风琴，桌面视图会继承它并自动构建手风琴。在这种情况下，使用 API 会“更好”，因为这意味着我只能在屏幕宽度小于768px 时初始化手风琴，避免使用一堆脚本来禁用桌面视图中的功能。 .