Question

我使用下面的代码来创建切换效果，因为我们使用javascript函数为CMS嵌入html代码。使用Jquery移动样式。

$('.ui-collapsible-heading-toggle').toggle(function(){
           $(".ui-collapsible-content").slideUp(
           function(){
               $(".ui-icon.ui-icon-shadow").addClass("ui-icon-plus");
               $(".ui-icon.ui-icon-shadow").removeClass("ui-icon-minus");
           }
           );
       },function(){ 
           $(".ui-collapsible-content").slideDown(
             function(){
               $(".ui-icon.ui-icon-shadow").addClass("ui-icon-minus");
               $(".ui-icon.ui-icon-shadow").removeClass("ui-icon-plus");
             }
           );
       });

HTML：

<div data-role='collapsible' class='collapseRoomDetails secondLevel ui-collapsible ui-collapsible-inset' data-iconpos='right' data-collapsed='false'>
<h3 class='ui-collapsible-heading'>
    <a href='#' class='ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-right ui-corner-top ui-corner-bottom ui-btn-up-a' data-corners='false' data-shadow='false' data-iconshadow='true' data-wrapperels='span' data-icon='plus' data-iconpos='right' data-theme='a' data-mini='false'><span class='ui-btn-inner ui-corner-top ui-corner-bottom'><span class='ui-btn-text'>Advance <span class='ui-collapsible-heading-status'> click to collapse contents</span></span><span class='ui-icon ui-icon-shadow ui-icon-minus'>&nbsp;</span></span></a>
</h3>
<div class='ui-collapsible-content' aria-hidden='false'>
    <div class='displayContent'>
        <div class='displayContentLeft'></div>
        <div class='displayContentRight'><p>Bay of Islands Hotel offers are even better value when you book ahead.</p>
        </div>
    </div>
</div>

<div data-role='collapsible' class='collapseRoomDetails secondLevel ui-collapsible ui-collapsible-inset' data-iconpos='right' data-collapsed='false'>
<h3 class='ui-collapsible-heading'>
    <a href='#' class='ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-right ui-corner-top ui-corner-bottom ui-btn-up-a' data-corners='false' data-shadow='false' data-iconshadow='true' data-wrapperels='span' data-icon='plus' data-iconpos='right' data-theme='a' data-mini='false'><span class='ui-btn-inner ui-corner-top ui-corner-bottom'><span class='ui-btn-text'>Purchase<span class='ui-collapsible-heading-status'> click to collapse contents</span></span><span class='ui-icon ui-icon-shadow ui-icon-minus'>&nbsp;</span></span></a>
</h3>
<div class='ui-collapsible-content' aria-hidden='false'>
    <div class='displayContent'>
        <div class='displayContentLeft'></div>
        <div class='displayContentRight'><p>Bay of Islands Hotel offers are even better value when you book ahead.</p>
        </div>
    </div>
</div>

没有很好的知识jquery功能。不知道如何只使用可点击的容器切换和其他隐藏..

Answer 1

您正在.ready()附加可折叠的增强 HTML标记。后一个函数不应该在jQuery Mobile中使用，使用它的'特殊事件来控制你的元素。

静态可折叠的HTML标记如下。一旦页面被初始化，它就会被jQuery Mobile增强。您不必静态将任何增强类添加到以下标记中。

<div data-role="collapsible">
  <h3>Heading</h3>
  <p>Contents</p>
</div>

如果您希望动态创建可折叠的，则需要通过在创建的元素上调用.collapsible()来手动增强。为了指示jQM添加所有必需的类并将事件绑定到它。 jQM中的可折叠项必须有特殊事件collapse和expand，您可以听取它们并在触发后执行某些功能。

我做了一个简短的演示，向您展示如何动态创建 collapsible 。我已经使用jQM页面事件pageinit来附加项目以及绑定事件。此事件相当于.ready()，每页 div触发一次。此外，我使用.collapsible()增强功能创建了 collapsibles 。

$(document).on("pageinit", function () {
    var data = [{
        "name": "Name 1",
            "content": "contents here..."
    }, {
        "name": "Name 2",
            "content": "different contents here..."
    }];

    /* Read aray to create two collapsibles
       and append them to content div */

    $.each(data, function (index, value) {
        $("[data-role=content]").append($("<div/>", {
            "data-role": "collapsible"
        }).append($("<h3/>").text(value.name)).append($("<p/>").text(value.content)).collapsible({
            collapsedIcon: "plus", /* set collapsed icon */
            expandedIcon: "minus"  /* set expanded icon */
        }));
    });

    /* listen to clicks on heading button
       if current clicked collapsible is expanded 
       collapse it and expand the other
       in case you have more than two collapsibles 
       the below code should be amended */

    $(".ui-collapsible-heading-toggle").on("click", function (e) {
        var current = $(this).closest(".ui-collapsible");
        if (current.hasClass("ui-collapsible-collapsed")) {
            $(".ui-collapsible-content", current).slideDown(function () {
                current.trigger("expand");
            });
            $(".ui-collapsible").not($(current)).find(".ui-collapsible-content").slideUp(function () {
                $(this).closest(".ui-collapsible").trigger("collapse");
            });
        } else {
            $(".ui-collapsible-content", current).slideUp(function () {
                current.trigger("collapse");
            });
            $(".ui-collapsible").not($(current)).find(".ui-collapsible-content").slideDown(function () {
                $(this).closest(".ui-collapsible").trigger("expand");
            });
        }
    });

    /* expand first collapsible */

    $(".ui-collapsible").first().find(".ui-collapsible-heading-toggle").click();

});

<强> Demo

Jquery上下滑动功能 - 关闭/打开所有div ..只需要1个div即可打开onclick

1 个答案: