2

我正在尝试编写一个 Jquery 移动应用程序（最新版本），因此当单击 JQM 按钮时，会打开一个特定的可折叠列表 ID 并将其放置在视图中。这个按钮应该允许切换。要打开的列表 id 是 id=set2。请帮助我到处检查，但没有运气。

这是我当前的代码...

JQM 按钮代码...

<a href="#" data-role="button" data-theme="a" id="expand">Find It</a>

HTML

<div data-role="collapsible-set" data-content-theme="d" id="set">
    <div data-role="collapsible" id="set1" data-collapsed="true">
        <h3>Header 1</h3>
        <p>SOME CODE HERE</p>
    </div>

    <div data-role="collapsible" id="set2" data-collapsed="true">
        <h3>Header 2</h3>
        <p>SOME CODE HERE</p>
    </div>
</div>

JS

<script type="text/javascript">
    $(document).on("pageinit", function() {
       $("a#expand").click(function() {
           $("#set2").trigger( "expand" );
       });
    });
</script>
4

2 回答 2

0

我为您创建了一个有效的小提琴：http:
//jsfiddle.net/acturbo/FZbyh/

这是jQuery代码：

//$(document).on("pageinit", function() {
$().ready(function() {

    // the "a" should not be needed
    //$("a#expand").on("click", function() {
    $("#expand").on("click", function() {
        $("#set2").trigger( "expand" );
    });

});

html:

<a href="#" data-role="button" data-theme="a" id="expand">Find It</a>

<div data-role="collapsible-set" data-content-theme="d" id="set">

<div data-role="collapsible" id="set1" data-collapsed="true">
    <h3>Header 1</h3>
    <p>SOME CODE HERE</p>
</div>

<div data-role="collapsible" id="set2" data-collapsed="true">
    <h3>Header 2</h3>
    <p>SOME CODE HERE</p>
</div>
于 2013-05-07T21:34:10.040 回答
0

我能够解决这个问题。这是由脚本代码和 id 名称“exapand”的放置引起的，因为这是触发事件的一个选项，id 必须由不同的名称组成。

于 2013-05-07T22:59:33.420 回答