两个div停靠和停靠 [英] Two divs dock and un-dock

问题描述

我有一个容器框和一个灰色框，它们从右侧隐藏.我也有2个按钮.单击其中之一时，将显示灰色框并推动容器框.当再次单击此按钮时，灰色框将通过使用toggleClass移出舞台，并且容器框将向后扩展.看起来像停靠和取消停靠.

I have a container box and a gray box, which is hidden from right side. I also have 2 buttons. When one of them is clicked, the gray box will show up and will push the container box. When this button is clicked again, the gray box will move away out of stage by using toggleClass and the container box will expend back its wide. That looks like dock and undock.

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

There is a logic here: When I click on button 1, the gray box appears showing "button 1" text inside it. WHILE the gray box is still on stage, if I click on button 2, "button 2" text will show on the gray box and it is still remain on stage.

问题:当我单击按钮2(如上所述)时，应该用灰色框推动容器，但是当灰色框仍在舞台上时，容器会膨胀.问题出在此JS $('.container').toggleClass('col2 col1');

Problem: When I click on the button 2 (as mentioning above), the container should be pushed by the gray box, but it expends while the gray box is still on stage. The problem is on this 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

推荐答案

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

Since the class manipulation on $grayBox is dependent on state, it is not always a direct "toggle". For example, clicking a button might turn on the class, but clicking another button won't always turn it off. So the toggling of col1 col2 can get out of sync with the state of $graybox.

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

I suggest using the state variable to change the width of .container. Also, instead of toggling two classes (col1 and col2), I suggest only toggling one class that overrides the default style.

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

Below, I set the default width for .container to 100%.
Toggling the col2 class changes the width to 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布局进行的实验:

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>

这篇关于两个div停靠和停靠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！