为什么仅在.info处于活动状态时才应用保证金

Question

为什么两个列表之间的50px余量仅在.info处于活动状态时出现？间隙应始终存在，并且一旦选择数字1-8，文本应出现在间隙内。欢迎提出所有建议。

＆＃13;

＆＃13;

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");

// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);

// Loop through all the number boxes
numbers.forEach(function(box, index){

  // Set up the click event handlers for all the number boxes
  box.addEventListener("click", function(){
  
    // Remove borders from each of the letter boxes
    letters.forEach(function(box){
      box.classList.remove("showBorder");
    });
      
    // Apply the border to only the one clicked element
    var info = document.getElementsByClassName('info')[0];
   
    info.style.display = 'inline';
    letters[index].classList.add("showBorder");
  });
  
});

＆＃13;

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.info {margin:auto; position: relative;padding-left:3em;display:none}

＆＃13;

                   <ul class="list-box">
                       <li class="click">1</li>
                       <li class="click">2</li>
                       <li class="click">3</li>
                       <li class="click">4</li>
                       <li class="click">5</li>
                       <li class="click">6</li>
                       <li class="click">7</li>
                       <li class="click">8</li>
                   </ul> 
                <div class="info">Regular length for your collar size</div>
                   <ul class="box-sleeve">
                       <li class="border">a</li>
                       <li class="border">b</li>
                       <li class="border">c</li>
                       <li class="border">d</li>
                       <li class="border">e</li>
                       <li class="border">f</li>
                       <li class="border">g</li>
                       <li class="border">h</li>
                   </ul> 
               

＆＃13;

＆＃13;

＆＃13;

Answer 1

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");

// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);

// Loop through all the number boxes
numbers.forEach(function(box, index){

  // Set up the click event handlers for all the number boxes
  box.addEventListener("click", function(){
  
    // Remove borders from each of the letter boxes
    letters.forEach(function(box){
      box.classList.remove("showBorder");
    });
      
    // Apply the border to only the one clicked element
    var info = document.getElementsByClassName('info')[0];
   
    info.style.visibility = 'visible';
    letters[index].classList.add("showBorder");
  });
  
});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.info {margin:auto; position: relative;padding-left:3em; visibility: hidden;}

 <ul class="list-box">
                       <li class="click">1</li>
                       <li class="click">2</li>
                       <li class="click">3</li>
                       <li class="click">4</li>
                       <li class="click">5</li>
                       <li class="click">6</li>
                       <li class="click">7</li>
                       <li class="click">8</li>
                   </ul> 
                <div class="info">Regular length for your collar size</div>
                   <ul class="box-sleeve">
                       <li class="border">a</li>
                       <li class="border">b</li>
                       <li class="border">c</li>
                       <li class="border">d</li>
                       <li class="border">e</li>
                       <li class="border">f</li>
                       <li class="border">g</li>
                       <li class="border">h</li>
                   </ul> 

而不是display:none

摆脱display

并包含

visibility:hidden

当调用点击时，将visibility:visible设置为info元素。