2

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

开始时：

的HTML：

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

CSS：

.hide { display:none;}

查询：

    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";
    }

});

我认为这是编写切换代码的​​一种糟糕方法，使用变量来注册状态看起来很繁重……应该有更好/更轻的方法来完成这项工作……有什么提示吗？？谢谢！

4

2 回答 2

2

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

像这样的东西可以吗？

$('.ttoggle').click(function() {
    $(this).find('.expand, .collapse').toggleClass('hide');
}
于 2013-06-10T00:10:27.407 回答
0

您可能想在这里查看一些库代码以获得灵感。许多 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')
})
于 2013-06-10T00:14:32.407 回答