的 DEMO

Question

我在外部html文件“index.html”中有以下链接：

<a href="service.html#collapsible_container1">Go to anchor</a>

在“services.html”页面上有几个可折叠的div容器。

<div data-role="collapsible" data-collapsed="true" class="xy" id="collapsible_container1">
      <h2>Collapsible Container 1</h2>
      ...
    </div>
    <div data-role="collapsible" data-collapsed="true" class="xy" id="collapsible_container2">
      <h2>Collapsible Container 2</h2>
      ...
    </div>

如何将其扩展到特定的可折叠容器？

Answer 1

有不同的方法可以做到这一点。一种方法是使用数据属性和脚本来更改页面。

在锚标记中，使用data-attribute存储您要导航到的可折叠的id：

  <a id="btnAnchor" class="btnanchor" data-collapsibleid="collapsible_container2" href="#">Go to second collapsible</a><br />
  <a id="btnAnchor2" class="btnanchor" data-collapsibleid="collapsible_container1" href="#">Go to first collapsible</a><br />
  <a id="btnAnchor3" class="btnanchor" data-collapsibleid="" href="#">Go to page</a>

然后，当用户点击一个锚时，使用脚本获取可折叠的id，保存它（我使用全局变量，你可以使用localStorage，传递为param等）并导航到页面：< / p>

  var selectedCollapsible = "";

   $(document).on("pagecreate","#index", function(){ 
    $(".btnanchor").on("click", function(e){
      selectedCollapsible = $(this).jqmData("collapsibleid");
      $(":mobile-pagecontainer").pagecontainer( "change", "service.html" );
    });
  });

最后，在pageshow事件中，如果显示了service，请检查是否存在可折叠ID，如果存在，请展开collapsible并滚动到它：

 $( document ).on( "pagecontainershow" , function ( e, ui ) {
      if ( ui.toPage[0].id == "service" ) {
        if (selectedCollapsible && selectedCollapsible.length > 0) {
          //scroll to and expand that collapsible
          var $col = $("#" + selectedCollapsible);
          if ($col.length > 0){
            $col.collapsible( "expand" );
            var top = $col.offset().top;
            $.mobile.silentScroll( top );
          }
          selectedCollapsible = "";
        }
      }
  });

JQuery Mobile：从页面上的锚点（从index.html到services.html）跳转到外部页面？

1 个答案:

的 DEMO