Добавить ссылку в заголовок сворачиваемого содержимого (разделенная ссылка) - CSS отсутствует

У меня есть сворачиваемое содержимое, и я хотел бы добавить ссылку, по которой можно щелкнуть, помимо фактической функции переключения заголовка.

[edit] Благодаря / часто /, я довольно близко, ссылка "на" заголовок работает, но мне не хватает 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/ Любые идеи очень ценятся.

Источник

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_action на e.target,

У меня где-то был пример, но я не могу его найти. Если я сделаю, я добавлю.

Источник
Другие вопросы по тегам