Question

我有两个按钮。单击其中之一时，将出现一个灰色框，再次单击该按钮将使该框离开舞台。

我单击按钮1，将出现一个灰色框，其中显示“按钮1”。

虽然灰色框在舞台上，但是如果我单击按钮2，我希望它保留在舞台上并显示文本“按钮2”，但是灰色框会熄灭。

我如何保持它在舞台上并只更改框中的文字？

$('.clickMe').on("click", function() {
  var MyText = $(this).text();
  $('.gray-box').text(MyText).toggleClass('dock');
})

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

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

View on JSFiddle

Answer 1

我假设您只想在与单击按钮具有相同文本的情况下隐藏该框。我建议将框中的文本与单击按钮的文本进行比较。如果它们相同，请切换该框。如果不相同相同，请设置框文字并确保框显示。

这是一个示范：

var $grayBox = $('.gray-box');

$('.clickMe').on("click", function() {

  // get the text of the clicked button
  var MyText = $(this).text();

  // if the box text is the same as the button text ...
  if (MyText == $grayBox.text()) {

    // ... toggle the box (in or out) ...
    $grayBox.toggleClass('dock');

  } else {

    // ... otherwise, set the box text and make sure it's showing.
    $grayBox.text(MyText).addClass('dock');

  }

})

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

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

编辑

这是另一种方法，其代码更加简洁。

请注意，toggleClass()接受一个state参数。
如果state为true，则添加该类；如果state为false，则删除该类。

.toggleClass（className，state）

状态
  类型：布尔值
  一个布尔值（不仅是true / falsy），用于确定是否应添加或删除该类。

演示：

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='clickMe'>Button 1</button>
<button class='clickMe'>Button 2</button>
<div class="gray-box">My box</div>

Answer 2

不清楚您在这里问什么。但是，如果您不想第二次单击关闭班级，为什么不只使用<button {...getToggleButtonProps()}> {selectedItem === null ? setOption(dropdownItems[0].value, () => setPage(1)) : setOption(selectedItem.value, () => setPage(1)) } {`${option}`} <ArrowIcon isOpen={isOpen} /> </button>呢？单击任一按钮时，可以检查灰色框是否已经具有类addClass，如果没有，则添加它。

dock

$('.clickMe').on("click", function(){
  var MyText = $(this).text(),
      $GrayBox = $('.gray-box');
      
  $('.gray-box').text(MyText);
  if (!$GrayBox.hasClass('dock')) {
    $GrayBox.addClass('dock');
  }
});

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

如果它是“ on”，则不要切换

2 个答案:

编辑