Add link within collapsible content header (split- link) - css missing

问题

I have collapsible content, and would like to add a link that can be clicked besides the actual toggling function of the header.

[edit]Thanks to /frequent/, I am pretty close, the link "on" the header is working, but I am missing the css to get the link inside the header - just can't figure it out:

<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>

See http://jsfiddle.net/XqAvB/1/ Any ideas are very much appreciated.

回答1:

You can do this in JQM 1.4 by enhancing the widget yourself, which means you need to set data-enhanced="true" on the collapsible and providing all collapsible-content yourself.

Normally an enhanced collapsible should have this code (using H4 header):

<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>

If you provide this code yourself, JQM will only create the widget object on the collapsible and not enhance the widget. This way you can add multiple pre-enhanced buttons to the header element with JQM only enhancing the first (if I recall correctly).

Something like this:

    <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>

Then CSS your button into the correct position, add your some_action click handler and don't forget to set a binding to collapsibleexpand event and e.preventDefault if the click was on your custom button (so check for some_action on e.target.

I had an example somewhere, but can't find it. If I do, I will add.

来源：https://stackoverflow.com/questions/19331789/add-link-within-collapsible-content-header-split-link-css-missing

标签

javascript

jquery

html

css

jquery-mobile