Question

我有可折叠的内容，并希望添加一个可以在标题的实际切换功能旁边点击的链接。

[编辑]感谢/频繁/，我非常接近，标题上的“链接”链接正在工作，但我错过了css来获取标题内的链接 - 只是无法弄明白：< / p>

<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/ 任何想法都非常感谢。

Answer 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将仅在可折叠的情况下创建窗口小部件对象，而不是增强窗口小部件。这样，您可以使用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>

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

我在某个地方有一个例子，但找不到它。如果我这样做，我会补充。

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

1 个答案: