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

【问题标题】：Jquery mobile trigger collapsible not working?Jquery移动触发器可折叠不起作用？
【发布时间】：2012-09-13 15:54:34
【问题描述】：

我正在尝试以编程方式折叠一个简单的可折叠

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

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

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

【问题讨论】：

标签： jquery jquery-mobile collapse

【解决方案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>

你可以试试上面的例子。

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

【讨论】：

aww... :S 我会在我的环境伙伴中尝试它:)。我会让你知道我的结果
嘿伙计，我重新编辑了帖子的最后一部分。也许试试我发布的例子，看看它对你有用。让我知道这是否有效:)。
继续不工作...我能问一下你打电话给图书馆的方式吗？这是我的：code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
在我的帖子末尾找到我的图书馆电话。希望这能帮助您解决问题。让我知道:)
我更正了库调用，它（我感到羞耻）实际上包含了一个错误（在两个月的工作中从未提出过：D），现在你的例子就像一个魅力，但是当我移动在它应该工作的真实页面中的示例，它不做任何事情。我想我有一些不平衡标签 div 或类似的问题。 -3- 我会尝试猜测是什么问题，非常感谢您的帮助！