Jquery mobile 通过JQuery Mobile中的翻转切换开关实现动态div

我想使用小部件让用户在页面上的两个div之间切换（淡入淡出）。我知道元素通常用于在表单中的二进制选项之间进行选择，所以这可能有点滥用元素，但我认为通过创造性的重用应该是可能的

然而，表单文档说您需要在服务器端处理所有表单，而我希望避免为此进行服务器事务处理——我已经在页面中有了这两个div

这可能吗

工作示例：

• （切换选项）
• （淡入/淡出选项）

HTML

CSS

工作示例：

• （切换选项）
• （淡入/淡出选项）

HTML

CSS

---

谢谢你，菲尔！这很管用，但并不能完全让我达到目的。目标是在页面加载时显示一个div，并在切换滑动时切换到另一个div（然后再返回）。我在脚本部分使用了以下代码，在您的示例的基础上创建了一些可以工作的东西：$（'#div1'）.toggle（）$（“#div2”）。切换（显示）；这在CSS中是：.div1{display:block；}.div2{display:none；}它主要工作，但在几张幻灯片之后就会中断。我这样做对吗？谢谢。你可以随意使用它，但这里有另一个例子：基于接受的标记。非常感谢！谢谢，菲尔！这很管用，但并不能完全让我达到目的。目标是在页面加载时显示一个div，并在切换滑动时切换到另一个div（然后再返回）。我在脚本部分使用了以下代码，在您的示例的基础上创建了一些可以工作的东西：$（'#div1'）.toggle（）$（“#div2”）。切换（显示）；这在CSS中是：.div1{display:block；}.div2{display:none；}它主要工作，但在几张幻灯片之后就会中断。我这样做对吗？谢谢。你可以随意使用它，但这里有另一个例子：基于接受的标记。非常感谢！谢谢。

<div data-role="page" id="home" class="type-home"> 
    <div data-role="content"> 
        <div class="content-primary"> 
            <p>The flip toggle switch is displayed like this:</p> 
            <div data-role="fieldcontain"> 
                <label for="slider">Flip switch:</label> 
                <select name="slider" id="my-slider" data-role="slider"> 
                    <option value="off">Off</option> 
                    <option value="on">On</option> 
                </select> 
            </div> 
            <div id="show-me" class="hidden">
                <p>
                    Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round.
                </p>  
            </div>
        </div>
    </div>
</div>

$('#my-slider').change(function() {
    var myswitch = $(this);
    var show     = myswitch[0].selectedIndex == 1 ? true:false;
    $('#show-me').toggle(show);
});

.hidden {
    display:none;   
}