如何允许用户从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黑客。

无论如何，这种方法使按钮宽度变小。标题位于可折叠的上方，即使可折叠的s是动态的，也应该没问题。其他一些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

}

<强>结果