Question

我正在尝试创建一个简单的切换 + EXPAND / -COLLAPSE 切换开关。

开始时：

HTML：

<div class="ttoggle">
  <div class="expand">+ EXPAND</div>
  <div class="collapse hide">- COLLAPSE</div>
</div>

CSS：

.hide { display:none;}

JQuery的：

    var x="collapse";
 $('.ttoggle').click(function() {
    if(x=="collapse") {
     $(this).find('.'+x).removeClass("hide");
     $(this).find('.expand').addClass("hide");
        x="expand";

    } else if(x=="expand") {
        $(this).find('.'+x).removeClass("hide");
        $(this).find('.collapse').addClass("hide");
        x="collapse";
    }

});

我认为这是编写切换代码的一种可怕方式，使用变量注册状态看起来很重...应该有更好/更轻的方法来完成这项工作....任何提示??谢谢！

Answer 1

如果我理解正确，您需要先点击ttoggle显示+ EXPAND，然后点击它时应显示-COLLAPSE。再次单击将再次显示+ EXPAND。

这样的事可以吗？

$('.ttoggle').click(function() {
    $(this).find('.expand, .collapse').toggleClass('hide');
}

Answer 2

您可能需要在此处查看一些库代码以获取灵感。很多UI库都有一个切换组件。最佳存储值取决于前端的其余部分。例如，如果您使用的是Backbone框架，那么Backbone.View可能会存储切换状态。或者，如果您要在表单中提交此内容，请将切换状态存储在隐藏输入中。 Bootstrap的按钮经过深思熟虑，并且有一个切换按钮：http://twitter.github.io/bootstrap/components.html#buttonGroups

对于一次性案例，我建议使用数据属性或隐藏输入，如：

HTML

<div id="MyToggle" data-isCollapsed="true">Expand</div>

JS

$('#MyToggle').click(function(){
  $(this).data('isCollapsed') = ! $(this).data('isCollapsed')
})

一个更好的JQuery Toggle Switch？

2 个答案: