javascript - 我如何允许用户从 jquery mobile 中的可折叠集中复制/粘贴文本

Question

我在 jquery mobile 中有一个可折叠的集合，如下所示:

<div data-role="collapsible-set">
    <div data-role="collapsible">
        <h1>
            <span style="font-size: 16px; font-weight: bold; white-space: pre-wrap;" id="title">This is a really long book title</span><br>
            <span style="font-size: 14px; font-weight: normal;" id="author">This is the Author of the book</span>
            <span style="font-size: 14px; font-weight: normal; font-style: italic;" id="year">Yr</span>
        </h1>
        <div>Info inside set</div>
    </div>
</div>

我希望我的用户能够突出显示每个列表项标题中的文本(我的 h1 标记中的内容)，类似于突出显示可折叠部分中的文本的方式。这样就可以复制/粘贴文本。

我意识到整个列表项本质上都是按钮。但是是否可以只使加号图标成为按钮？这样可以突出显示标题中的文本？

这是一个fiddle我的可折叠套装。

Answer 1

我不确定它们是否是在按钮上启用复制的 Jquery 方式，或者是否有任何 CSS hack 也可以启用复制。

不管怎样，这个方法让按钮的宽度变小了。 header 位于可折叠的上方，即使可折叠的是动态的，也应该没问题。其他一些 CSS 可以稍微移动所有内容，以便它们对齐。它可以稍微改进，但正如您所看到的，它肯定是可行的。

演示

http://jsfiddle.net/oq2a2r2o/

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn
{width:15px !important;
margin-top: -45px;
position: fixed;}

.ui-btn-icon-left { padding-left: 0 !important; }

.nextto { margin-left:50px; margin-bottom:5px

结果