Twitter Bootstrap。折叠儿童元素

时间:2012-10-16 11:43:18

标签: javascript jquery html twitter-bootstrap

假设我们有一个缩略图:

<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应该是什么样的? 而且我想问一下使用数据属性是否合理,或者最好使用Twitter js API?

1 个答案:

答案 0 :(得分:1)

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

有些人不喜欢使用data-属性,因此“喜欢”使用API​​,但对于外部观察者,实施者的偏好不适用。类似地,非程序员可能会发现使用data-属性“更容易”,但同样,对于最终用户来说,设计者发现的更容易,他们感兴趣的是最终结果 - 小部件。

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