jQuery 移动设备：在可折叠上切换一些属性，使其可打开或不可打开

Question

我想阻止用户在第 2 个/第 3 个 jQuery Mobile Collapsible 中看到更高级的内容，直到他们在第一个 Collapsible 结束时通过测验和准备。我的想法是在第 2 个/第 3 个 Collapsible 上给他们一个工具提示，告诉他们如果他们试图跳过第一个 Collapsible 的末尾打开它，请参加测验和准备。我会怎样：

1) 防止第2/3个Collapsible打开，通过后

2) 允许他们打开 2nd Collapsible 并移除工具提示？

Answer 1

因此，如果您需要 "beforeexpand" 事件，您可以覆盖内部 _handleExpandCollapse 函数：

var passedFirst = false;

$.widget("mobile.collapsible", $.mobile.collapsible, {
  _handleExpandCollapse: function(isCollapse) {
    var opts = this._renderedOptions, ui = this._ui;
    var retval = this._trigger(isCollapse ? "beforecollapse" : "beforeexpand" );
    if(!retval) return false;
    ui.status.text(isCollapse ? opts.expandCueText : opts.collapseCueText);
    ui.heading.toggleClass("ui-collapsible-heading-collapsed", isCollapse).find("a").first()
      .toggleClass("ui-icon-" + opts.expandedIcon, !isCollapse)
      .toggleClass("ui-icon-" + opts.collapsedIcon, (isCollapse || opts.expandedIcon === opts.collapsedIcon))
      .removeClass($.mobile.activeBtnClass);
    this.element.toggleClass("ui-collapsible-collapsed", isCollapse);
    ui.content.toggleClass("ui-collapsible-content-collapsed", isCollapse)
      .attr("aria-hidden", isCollapse).trigger("updatelayout");
    this.options.collapsed = isCollapse;
    this._trigger(isCollapse ? "collapse" : "expand");
  }
});

$(document).on("collapsibleexpand", "#pass1", function(event, ui) {
  passedFirst = true;
}); 

$(document).on("collapsiblebeforeexpand", "#pass2", function(event, ui) {
  var t = event.currentTarget, x = t.offsetLeft, y = t.offsetTop + t.scrollTop;
  if(!passedFirst) $("#extra-info" ).popup("open", {x: x, y: y});
  return passedFirst;
}); 

$(document).on("popupafteropen", "#extra-info", function(event, ui) {
  var self = this;
  setTimeout(function(){$(self).popup("close"); }, 1000);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="page" id="page1">
    <div data-role="header">
      <h1>Collapsible beforeexpand</h1>
    </div>
    <div role="main" class="ui-content">
      <div data-role="collapsible" id="pass1">
        <h3>Pass 1</h3>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
      </div>
      <div data-role="collapsible" id="pass2">
        <h3>Pass 2</h3>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
      </div>
    </div>
    <div id="extra-info" data-role="popup" data-transition="flip">
      <p>You must pass #1!</p>
    </div>
  </div>
</body>

</html>

关于 Popup：这里是完整的文档：http://api.jquerymobile.com/popup/

jQuery 移动设备：在可折叠上切换一些属性，使其可打开或不可打开

jQuery Mobile: toggle some property on a Collapsible so it is either openable or not

jquery-mobile

jQuery 移动设备：在可折叠上切换一些 属性，使其可打开或不可打开

jQuery Mobile: toggle some property on a Collapsible so it is either openable or not

jquery-mobile

jQuery 移动设备：在可折叠上切换一些属性，使其可打开或不可打开