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

Question

我正在尝试将 'collapsible-set' 与广播组集成。

我希望通过单击“+/-”图标触发 'expand/collapse' 行为，并通过单击 label/input 触发单选按钮选择。

到目前为止，我已经...

.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/

或者您可以将 expand/collapse 与收音机分开 check/uncheck:

演示 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;
}

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

allow click event inside collapsable heading

jquery

jquery-mobile

jquery-mobile-collapsible