0

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

[编辑]感谢 /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/ 非常感谢任何想法。

4

1 回答 1

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>

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

我在某处有一个示例，但找不到。如果我这样做，我会补充。

于 2013-10-12T15:32:08.607 回答