Question

TL; DR 请参阅链接http://codepen.io/anon/pen/MKqKZe以获取解释我问题的代码。

我想在图像中获得结果。

我的代码：

HTML

<div class="some-div-for-other-purpose">
  <ul class="dynamic-height-list">
    <li>
      <label>Name1</label>
      <span class='glyphicon glyphicon-option-vertical'
            onclick="toggleGreenDiv()">
      </span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name2</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name3</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name4</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
  </ul>
</div>

CSS

body {
  margin-top: 20px;
  margin-left: 20px;
  background: lightblue;
}

.glyphicon {
  float: right;
  padding: 0 5px;
  cursor: pointer;
  }

.dynamic-height-list {
  max-height: 120px;
  overflow-y: scroll;
  width: 200px;

  li {
  width: 100%;
  padding: 5px;
  background-color: lightgray;
  list-style-type: none;
  position: relative;    

    &:hover {
      background-color: #BBB;
    }
  }
}

.toggle-visibility-green-div {
  display: none;
  position: absolute;
  background-color: lightgreen;
  left: 155px;
  top: 0;
}

.showGreenDiv + .toggle-visibility-green-div {
  display: block;
}

JS

$('.glyphicon').click(function() {
    $(this).toggleClass('showGreenDiv');
});

问题： 这个绿色div进入主ul列表并使其可水平滚动，而不像图像。

从ul中删除溢出属性，然后它可以正常工作但我不能这样做，因为列表是动态的，并且必须在max-height
后滚动
重要提示：另外，为ul添加overflow：visible会使其工作但同时   时间溢出-y也应滚动，因为列表是垂直的   滚动。而溢出-x：可见和溢出-y：滚动不起作用   在同一时间。

注意：因为，我希望绿色div显示在点击的任何＆lt;＆＃39; li＆gt;按钮旁边，所以它必须是＆lt;＆＃39; li＆＃39的孩子;取代。而且我不想找到我的＆lt;＆＃39; li＆＃39;＆gt;的位置。使用javascript。因此，请通过更改HTML的结构或修改css来判断是否存在解决方案

修改另外，为什么overflow-x：visible不能像overflow-y那样工作：可见。我的意思是，为什么不能将overflow-x：visible视为无效。

Answer 1

将overflow-y: scroll和max-height移至您的父级div，以便在您的width到达后不会被删除。

.some-div-for-other-purpose {
  max-height: 130px;
  overflow-y: scroll;
}

Like this

ul overflow-x：visible和overflow-y：scroll不能同时工作

1 个答案: