Question

我有这个可折叠：

<div id ="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Options</h3>
            <div data-role="fieldcontain" id="checkboxesDiv">
                <label>
                    <input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
                <label>
                    <input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
                <small id="whatsthatinfobox">What's This?</small>
                <hr>
                <fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
                    <legend>Theme:</legend>
                    <input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
                    <label for="radio-choice-day">Day</label>

                    <input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
                    <label for="radio-choice-night">Night</label>
                </fieldset>
            </div>
        </div>

检测水平单选按钮之间的变化：

$("#themeChanger").change(function(){
                if ($("#radio-choice-day").is(":checked"))
                {
                    theme = "day";
                }
                else 
                {
                    theme = "night";
                }
                changeTheme(theme);


            });

你会在这里放什么：

function changeTheme(theme)
            {
                if (theme=="day")
                {
                    //change to day theme
                }
                else
                {
                    //change to night theme

                }
            }

要更改可折叠的data-theme和data-content-theme属性？

我尝试使用attr("data-theme","a");，但它不起作用。

谢谢。

Answer 1

您只需要使用其他选项调用Collapsible Widget。

$("#optionsDiv").collapsible({theme: "a", contentTheme: "a"});  
$("#optionsDiv").collapsible({theme: "b", contentTheme: "b"});

$("#themeChanger").change(function() {
  if ($("#radio-choice-day").is(":checked")) {
    theme = "day";
  } else {
    theme = "night";
  }
  changeTheme(theme);
});

function changeTheme(theme) {
  if (theme == "day") {
    $("#optionsDiv").collapsible({
      theme: "a",
      contentTheme: "a"
    });
  } else {
    $("#optionsDiv").collapsible({
      theme: "b",
      contentTheme: "b"
    });

  }
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


<div id="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
  <h3>Options</h3>
  <div data-role="fieldcontain" id="checkboxesDiv">
    <label>
      <input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
    <label>
      <input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
    <small id="whatsthatinfobox">What's This?</small>
    <hr>
    <fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
      <legend>Theme:</legend>
      <input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
      <label for="radio-choice-day">Day</label>

      <input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
      <label for="radio-choice-night">Night</label>
    </fieldset>
  </div>
</div>

如何动态更改JQM的主题可折叠

1 个答案: