Jquery 两个DIV船坞和un船坞

我有一个集装箱箱和一个灰色箱，从右边隐藏。我还有两个按钮。单击其中一个时，灰色框将显示，并将推动容器框。再次单击此按钮时，灰色框将通过使用toggleClass移出舞台，容器框将扩展回其宽度。那看起来像是进退两难

这里有一个逻辑：当我点击按钮1时，会出现一个灰色框，里面显示按钮1的文本。当灰色框仍在舞台上时，如果我单击按钮2，按钮2文本将显示在灰色框上，并且它仍在舞台上

问题：当我点击上面提到的按钮2时，容器应该由灰盒推动，但当灰盒还在舞台上时它会膨胀。问题出在这个JS$'.container'.toggleClass'col2 col1'上

变量$grayBox=$'.grayBox'； $'.clickMe'。单击，函数{ //获取已单击按钮和框的文本。 var myText=$this.text； var-boxText=$grayBox.text； //如果文本不同或框隐藏，则为true。否则为false。 var state=myText！=boxText | |$grayBox.not'.dock'； //更新框文本和状态。 $grayBox.textmyText.toggleClass'dock'，state； $'.container'.toggleClass'col2 col1'； } .灰盒{ 位置：固定； 右边距：-120px； 顶部：10px； 右：10px； 宽度：100px； 高度：100px； 背景颜色：灰色； -webkit转换：所有0.25秒都可轻松输入输出0秒； -moz转换：所有0.25秒均在0秒内输出； -o型过渡：所有0.25秒均缓进0秒，缓出0秒； 过渡：所有0.25秒均缓进0秒，缓出0秒； } .码头{ 右边距：0； } .集装箱{ 边框：1px纯红； 高度：400px； -webkit转换：所有0.25秒都可轻松输入输出0秒； -moz转换：所有0.25秒均在0秒内输出； -o型过渡：所有0.25秒均缓进0秒，缓出0秒； 过渡：所有0.25秒均缓进0秒，缓出0秒； } .col1{ 宽度：100%； } .col2{ 宽度：calc100%-120px； }

按钮1 按钮2 我的箱子

---

由于$grayBox上的类操作依赖于状态，因此并不总是直接切换。例如，单击一个按钮可能会打开该类，但单击另一个按钮并不总是关闭该类。因此，col1 col2的切换可能与$graybox的状态不同步

我建议使用state变量来更改.container的宽度。另外，我建议只切换一个覆盖默认样式的类，而不是切换两个类col1和col2

下面，我将.container的默认宽度设置为100%。 切换col2类将宽度更改为calc100%-120px

变量$grayBox=$'.grayBox'； var$container=$'.container'； $'.clickMe'。单击，函数{ //获取已单击按钮和框的文本。 var myText=$this.text； var-boxText=$grayBox.text； //如果文本不同或框隐藏，则为true。否则为false。 var state=myText！=boxText | |$grayBox.not'.dock'； //更新框文本和状态。 $grayBox.textmyText.toggleClass'dock'，state； $container.toggleClass'col2'，state； }; .灰盒{ 位置：固定； 右边距：-120px； 顶部：10px； 右：10px； 宽度：100px； 高度：100px； 背景颜色：灰色； -webkit转换：所有0.25秒都可轻松输入输出0秒； -moz转换：所有0.25秒均在0秒内输出； -o型过渡：所有0.25秒均缓进0秒，缓出0秒； 过渡：所有0.25秒均缓进0秒，缓出0秒； } .码头{ 右边距：0； } .集装箱{ 边框：1px纯红； 高度：400px； -webkit转换：所有0.25秒都可轻松输入输出0秒； -moz转换：所有0.25秒均在0秒内输出； -o型过渡：所有0.25秒均缓进0秒，缓出0秒； 过渡：所有0.25秒均缓进0秒，缓出0秒； 宽度：100%； } .col2{ 宽度：calc100%-120px； } 按钮1

按钮2

---

我的盒子我试过“如果！$”。gay box'.hasClass'dock'{$'.container'.toggleClass'col2 col1'；}else{$'.container'.addClass'col2'；}'但它不起作用。嗨，showdev，你真是个大师！非常感谢您对这种情况的解释。我不太了解toggleClass是否接受状态参数，在本例中是$grayBox.textmyText.toggleClass'dock'，state；您能解释一下state是如何工作的吗？传递state参数是控制类是添加还是删除的一种方法。通常，toggleClass会在类不存在时添加该类，在类存在时删除该类。当您通过状态时，它的工作方式不同。如果state为true，则将添加该类。如果state为false，则将删除该类。您好，ShowDev，非常感谢您的解释！