Question

我试图以编程方式折叠一个简单的

折叠

Javascript:
$( ".nuovoPaziente" ).trigger( "collapse" );

Html:
<div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">
</div>

但它不起作用。我有最新的jquery移动库1.1.1。我确定执行到达触发器代码，因为我有一个警报，然后检查它是否到达执行代码。任何的想法？ ^^

Answer 1

您在可折叠的定义中使用ID：

<div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">

因此，它应该是#nuovoPaziente：

$( "#nuovoPaziente" ).trigger( "collapse" );

.nuovoPaziente与class有关;因此，如果您想保留此约定，则必须将可折叠修改为以下内容：

$( ".nuovoPaziente" ).trigger( "collapse" );

<div data-role="collapsible" data-collapsed="false" data-theme="b" class="nuovoPaziente">

以下示例对我有用：

JS / jQuery：

$(function() {
    $("#collapse").click(function() {
        console.log("ok");
        $( "#nuovoPaziente" ).trigger( "collapse" );
    });
});

<强> HTML：

<body>
    <div data-role="page">
        <div data-role="content">

            <div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">
                <h3>I'm a header</h3>
                <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
            </div>

            <button id="collapse">collapse!</button>
        </div>
    </div>  
</body>

我按如下方式调用了库：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

您可以尝试上面的示例。

希望这会有所帮助。让我知道你的结果。

Jquery移动触发器可折叠不起作用？

1 个答案: