更好的JQuery切换开关？

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

开始时：

HTML：

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

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

});

---

我认为这是编写切换代码的一种糟糕的方式，使用变量来注册状态看起来很难……应该有更好/更轻松的方式来实现这一点……有什么提示吗？？谢谢

如果我理解正确，您希望先单击t切换显示+展开，然后单击时显示-折叠。再次单击将再次显示+展开

像这样的东西行吗

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

---

在这里，您可能想查看一些库代码以获得灵感。很多UI库都有一个切换组件。存储值的最佳位置取决于前端的其余部分。例如，如果您使用的是主干框架，那么Backbone.View可能应该存储切换状态。或者，如果要在表单中提交，请将切换状态存储在隐藏输入中。Bootstrap的按钮经过深思熟虑，它们有一个切换按钮：

对于一次性情况，我建议使用数据属性或隐藏输入，如下所示：

HTML

---

你只是在切换一个项目吗？或者是像可折叠菜单这样的一堆东西？为什么不在单击开关时替换内部HTML呢？或者，这些div的样式是否不同？（颜色等）是的！就像一个魅力…这正是我想要的-更轻的代码！完美的谢谢贝姆！如果代码回答了您的问题并满足了您的需求，我建议选择它作为您问题的答案。谢谢简单，非常有用

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

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

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