在可折叠的内容标题中添加链接（拆分链接） - 缺少 css答案

【问题标题】：Add link within collapsible content header (split- link) - css missing在可折叠的内容标题中添加链接（拆分链接） - 缺少 css
【发布时间】：2013-10-12 07:43:16
【问题描述】：

我有可折叠的内容，除了标题的实际切换功能外，还想添加一个可以点击的链接。

[edit]感谢/frequent/，我已经很接近了，标题“打开”的链接正在工作，但我错过了获取标题内链接的css - 只是无法弄清楚：

<html>
<body>
<script type="text/javascript" charset="utf-8">
$( document ).on('pageinit','#page1', function (event) {
 $(".click_action").bind("click", function (e) {
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  $.mobile.changePage($(this).attr('href'));
 });
});
</script>
<div data-role="page" id="page1"> 

<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus" href="#">Heading</a>
<a class="click_action" href="test2.html">Go to test2.html</a>
</h3>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
     <p>I'm the collapsible content. Open me!</p>
</div>
</div>

</body>
</html>

见http://jsfiddle.net/XqAvB/1/ 任何想法都非常感谢。

【问题讨论】：

我很困惑，在您的 javascript 中，单击绑定到一个具有类 ui-collapsible-heading-toggle 的元素，但我在 HTML 中看不到该元素。那是h3吗？

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您可以在 JQM 1.4 中通过自己增强小部件来做到这一点，这意味着您需要在可折叠部件上设置 data-enhanced="true" 并自己提供所有可折叠内容。

通常，增强型可折叠应具有以下代码（使用 H4 标头）：

<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed">
    <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left" href="#">Heading<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
    </h4>
    <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
         <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
</div>

如果您自己提供此代码，JQM 将仅在可折叠部件上创建小部件对象而不增强小部件。这样，您可以将多个 pre-enhanced 按钮添加到标题元素，而 JQM 仅增强第一个（如果我没记错的话）。

类似这样的：

    <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left" href="#">Heading<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
        <a class="ui-btn ui-btn-icon-notext ui-icon-plus some_action" href="#">Make Foo</a>
    </h4>

然后 CSS 你的按钮到正确的位置，添加你的 some_action 点击处理程序，不要忘记设置绑定到 collapsibleexpand 事件和 e.preventDefault 如果点击是在你的自定义按钮上（所以检查@ 987654329@e.target。

我在某处有一个示例，但找不到。有的话我再补充。

【讨论】：

差不多了，很好的提示！但是“CSS 你的按钮”说起来容易做起来难；）有什么想法吗？谢谢！
你有小提琴吗？
检查更新的fiddle。您必须自己增强第二个按钮 - 请参阅 JQM 1.4 中data-enhanced 的信息。通常，JQM 将在创建 JQM 小部件时读取所有 data-foo 属性并生成类（或所需元素）。设置data-enhanced="true" 时，您告诉JQM 您生成完成的HTML = 无需读取数据-（慢）和操作DOM。对于按钮来说这很容易，因为它只是将数据属性更改为类。剩下的就是一些简单的 CSS。如果您有任何其他问题，请告诉我。
并将答案标记为已检查，如果那是您正在寻找的。谢谢:-)
Jupp，希望我希望文本在其中并且没有按钮：jsfiddle.net/XqAvB/4 我希望 em- 和 % 值在不同的设备和分辨率上保持现在的位置......时间会证明一切我想！非常感谢您的帮助！