jquery - 两个 div 停靠和取消停靠

Question

我有一个容器盒和一个灰色的盒子，它隐藏在右侧。我也有2个按钮。单击其中一个时，灰色框将出现并插入容器框。再次单击此按钮时，灰色框将通过使用 toggleClass 移出舞台，容器框将扩大其宽度。这看起来像是停靠和取消停靠。

这里有一个逻辑:当我单击按钮 1 时，会出现灰色框，其中显示“按钮 1”文本。当灰色框仍在舞台上时，如果我单击按钮 2，“按钮 2”文本将显示在灰色框上并且它仍保留在舞台上。

问题:当我点击按钮 2 时(如上所述)，容器应该被灰盒插入，但当灰盒还在舞台上时它就消耗掉了。问题出在这个 JS $('.container').toggleClass('col2 col1');

var $grayBox = $('.gray-box');

$('.clickMe').on('click', function() {

  // get text of clicked button and box.
  var myText = $(this).text();
  var boxText = $grayBox.text();

  // "true" if text differs OR box is hidden. otherwise "false".
  var state = myText != boxText || $grayBox.not('.dock');

  // update the box text and state.
  $grayBox.text(myText).toggleClass('dock', state);
  $('.container').toggleClass('col2 col1');
})

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

.container {
  border: 1px solid red;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.col1 {
  width: 100%;
}

.col2 {
  width: calc(100% - 120px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container col1">
  <p>
  </p>
  <button class='clickMe'>Button 1
     
     </button>
  <p></p>
  <button class='clickMe'>Button 2</button>
</div>

<div class="gray-box">
  My box
</div>

请查看我在 jsfiddle 上的样本

Answer 1

由于对$grayBox 的类操作依赖于state，它并不总是直接的“切换”。例如，单击一个按钮可能会打开类，但单击另一个按钮并不总是将其关闭。所以 col1 col2 的切换可能会与 $graybox 的状态不同步。

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

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

var $grayBox = $('.gray-box');
var $container = $('.container');

$('.clickMe').on('click', function() {

  // get text of clicked button and box.
  var myText = $(this).text();
  var boxText = $grayBox.text();

  // "true" if text differs OR box is hidden. otherwise "false".
  var state = myText != boxText || $grayBox.not('.dock');

  // update the box text and state.
  $grayBox.text(myText).toggleClass('dock', state);
  $container.toggleClass('col2', state);

});

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

.container {
  border: 1px solid red;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  width: 100%;
}

.col2 {
  width: calc(100% - 120px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <p><button class='clickMe'>Button 1</button></p>
  <p><button class='clickMe'>Button 2</button></p>
</div>

<div class="gray-box">My box</div>

---

编辑

这是一个使用 flexbox layout 的实验:

var $sideNav = $('#sideNav');

$('.navToggle').on('click', function() {

  // get text of clicked button and box.
  var btnText = $(this).text();
  var navText = $sideNav.text();

  // "true" if text differs OR box is hidden. otherwise "false".
  var state = btnText != navText || $sideNav.not('.open');

  // update the box text and state.
  $sideNav.text(btnText).toggleClass('open', state);

});

#container {
  display: flex;
}

#buttons {
  border: 1px solid red;
  flex: 1 1 0;
}

#sideNav {
  height: 100px;
  background-color: gray;
  transition: all 0.25s ease-in-out 0s;
  flex: 0 0 0;
  overflow: hidden;
}

#sideNav.open {
  flex-basis: 100px;
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="buttons">
    <p><button class='navToggle'>Button 1</button></p>
    <p><button class='navToggle'>Button 2</button></p>
  </div>
  <div id="sideNav">My box</div>
</div>