Question

我正在尝试将'collapsible-set'与广播组合作。

我希望通过点击“+/-”图标触发“展开/折叠”行为，然后点击标签/输入来触发广播选择。

到目前为止，我有......

.ui-collapsible-heading .ui-radio label.ui-btn {
  border-style: none;
  padding-top: 0;
  padding-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<form>
  <fieldset>
    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
      <div data-role="collapsible">
        <h3>
            <input name="radio" id="radio1" value="1" type="radio">
            <label for="radio1">One</label>
        </h3>
        <p>I'm the collapsible content for section 1</p>
      </div>
      <div data-role="collapsible">
        <h3>
            <input name="radio" id="radio2" value="2" type="radio">
            <label for="radio2">Two</label>
        </h3>
        <p>I'm the collapsible content for section 2</p>
      </div>
    </div>
  </fieldset>
</form>

这大致可以实现所需的布局，但单选按钮不会收到点击事件。

Answer 1

您只需使用可折叠本身来激活相应的单选按钮：

$(".ui-collapsible").on("collapsibleexpand", function(event, ui) {
  $(this).find("input[type='radio']").prop("checked", true);
  $("input[type='radio']").checkboxradio("refresh");
  $(this).find("input[type='radio']").trigger("change");
});

演示：https://jsfiddle.net/hvpLn3qm/

或者您可以将扩展/折叠与无线电检查/取消选中分开：

演示2：https://jsfiddle.net/hvpLn3qm/4/

我还会添加以下CSS规则：

.ui-collapsible-heading .ui-radio label.ui-btn {
  line-height: 1.6 !important;
}
.ui-collapsible-heading .ui-radio {
  display: inline-block !important;
}

允许在可折叠标题内单击事件

1 个答案: