在可折叠内容标题（拆分链接）中添加链接 - css丢失 [英] Add link within collapsible content header (split- link) - css missing
问题描述
我有可折叠的内容，并希望添加一个链接，除了标题的实际切换功能之外，还可以单击。
[edit]感谢/频繁/，我非常接近，标题上的链接正在工作，但是我错过了CSS来获取标题内的链接 - 只是无法弄清楚：
< html>
< body>
< script type =text / javascriptcharset =utf-8>
$（document）.on（'pageinit'，'＃page1'，function（event）{
$（。click_action）。bind（click，function（e）{
e.stopPropagation（）;
e.preventDefault（）;
e.stopImmediatePropagation（）; $ b $ .mobile.changePage（$（this）.attr（'href'）） ;
}）;
}）;
< / script>
< div data-role =pageid =page1>
< div data-role =collapsibleclass =ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaningdata-增强= 真 >
< h3 class =ui-collapsible-heading ui-collapsible-heading-collapsed>
< a class =myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plushref =＃>标题< / a>
< a class =click_actionhref =test2.html>转到test2.html< / a>
< / h3>
< div class =ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsedaria-hidden =true>
< p>我是可折叠的内容。打开我！< / p>
< / div>
< / div>
< / body>
< / html>
请参阅 http://jsfiddle.net/XqAvB/1/
非常感谢您的任何建议。 解决方案
您可以通过自己增强窗口小部件来实现JQM 1.4，这意味着您需要在可折叠页面上设置 data-enhanced =true，并提供所有可折叠内容你自己。
通常一个增强的可折叠应该有这个代码（使用H4头）：
< div data-role =collapsibleclass =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>
< / h4>
< div class =ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsedaria-hidden =true>
< p>我是可折叠的内容。默认情况下，我已关闭，但您可以点击标题打开我。< / p>
< / div>
< / div>
如果您自己提供此代码，JQM将只在可折叠的对象上创建对象，而不会增强小部件。通过这种方式，您可以使用JQM向头元素添加多个预增强按钮，只增强第一个（如果我正确记得）。
类似于此：
< h4 class =ui -collapsible-heading ui-collapsible-heading-collapsed>
< / a>
< a class =ui-btn ui -btn-icon-notext ui-icon-plus some_actionhref =＃> Make Foo< / a>
< / h4>
然后将CSS按钮放入正确位置，添加 some_action click处理程序，并且不要忘记设置一个绑定到 collapsibleexpand 事件和 e.preventDefault 点击是你的自定义按钮（所以检查 some_action on e.target 。
我在某个地方有个例子，但找不到它，如果我这样做，我会添加。
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.
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.
这篇关于在可折叠内容标题（拆分链接）中添加链接 - css丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
