单击另一个按钮时如何停止移动按钮？答案

【问题标题】：How do I stop the moving of a button while clicking another?单击另一个按钮时如何停止移动按钮？
【发布时间】：2022-08-13 23:18:05
【问题描述】：

以下代码包含 2 个按钮及其各自的下拉内容。当我单击第一个按钮时，另一个按钮会自行移动。我该如何阻止这种情况发生？

var coll = document.getElementsByClassName(\"button\");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener(\"click\", function() {
    this.classList.toggle(\"active\");
    var content = this.nextElementSibling;
    if (content.style.display === \"block\")
      content.style.display = \"none\";
    else
      content.style.display = \"block\";
  });
}

.content {
  display: none;
}

<button type=\"button\" class=\"button\" style=\"position: static; left: 100;\">For Copper Rollers</button>
<div class=\"content\" style=\" width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px; margin-right: 5px; \">
</div>
<button class=\"button\" type=\"button\" style=\"position: static; left: 175px; \">For Rubber Rollers</button>
<div class=\"content\" style=\"margin-left:50%; float: left; width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px;\">
</div>

content div 是否都出现在相同的水平偏移量（即：left:50% 原样）或相对于它们的父按钮？
在相同的水平偏移上。
这是否意味着所有内容 div 都将在彼此下方对齐到页面的一侧作为第一个？
第一个内容 div 是页面的前半部分，下一个在第二半部分与之相邻。（彼此相邻）

标签： javascript html css position

【解决方案1】：

我会让下拉内容具有position: asolute (css)，这样它就不会影响页面上的任何其他元素。

PS：确保在制作下拉菜单时牢记可访问性，不幸的是，您当前的 sn-p 不是。

【讨论】：

我试过了，但它仍然无法正常工作。

【解决方案2】：

如果您指定position:absolute，您可以在Javascript 中进行一些基本计算以确定content 应该出现的位置。这或多或少是想要的效果吗？

document.querySelectorAll('button').forEach(( bttn, index )=>bttn.addEventListener('click',function(e){
  this.classList.toggle("active");
  
  // get the bounding box for the button so we can
  // get a suitable height offset for content
  let bb=this.getBoundingClientRect();
  
  // find the content and toggle display state
  let div=this.nextElementSibling;
      div.style.display=div.style.display=='block' ? 'none' : 'block';
  
  // find the current style properties for the content
  let style=getComputedStyle( div );
  let bbd=div.getBoundingClientRect();
  
  // calculate x / y positions for content 
  let x=( Math.ceil( bbd.width ) + parseInt( style.paddingLeft ) - parseInt( style.marginLeft ) ) * index;
  let y=Math.ceil( bb.height ) + Math.ceil( bb.bottom );
  
  // apply those positions to the content
  div.style.top=`${y}px`;
  div.style.left=`${x}px`;
  
  // identify content by parent
  div.textContent=this.textContent.replace('For ','');
}));

body{
  width:100%;
  height:100vh;
}
button.button{
  padding:0.25rem;
}

/*
  assign the absolute position
  to the content divs but let
  javascript calculate x/y positions.
*/
.content {
  position:absolute;
  display: none;
  width: calc( 50% - 3rem );
  background-color:lightblue;
  padding:1rem;
  border-radius:10px;
  border:1px solid grey;
  float:none;
  clear:none;
  margin:0 0.25rem;
}


.content:first-of-type{
  background:pink;
}
.active{
  color:green
}

<!-- 
  let css do the styling and positioning as `inline` styles
  make updating a pain in the proverbial
-->
<button type="button" class="button">For Copper Rollers</button>
<div class="content"></div>

<button class="button" type="button">For Rubber Rollers</button>
<div class="content"></div>

【讨论】：