主页 / 问题 / 650037
Accepted
Александр
Asked:2020-04-08 17:01:11 +0000 UTC2020-04-08 17:01:11 +0000 UTC

溢出外的元素

  • 772

我有一个固定的列表。高度和滚动，带有标签元素。单击标签元素时，单击的元素旁边会出现一个按钮。

我需要这个按钮在列表之外，但在元素的前面。

我们需要一些解决方案，即使是拐杖也可以:(

这是您需要的：

在此处输入图像描述

这是我的代码：

.check {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  overflow-y: scroll;
}

.check label {
  display: block;
  position: relative;
}

.box-button {
  display: none;
  position: absolute;
  right: -10px;
  top: 0;
  background-color: #fc0;
  box-shadow: 1.4px 1.4px 4px rgba(0, 0, 0, 0.35);
  border: none;
  color: #424242;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="check">
  <label for="check-1">
    																<input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-2">
    																<input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-3">
    																<input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-4">
    																<input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-5">
    																<input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-6">
    																<input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <button class="box-button">Показать</button>
</div>
<div class="check">
  <label for="check-7">
    																<input id="check-7" class="element-checkbox" name="check-7" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-8">
    																<input id="check-8" class="element-checkbox" name="check-8" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-9">
    																<input id="check-9" class="element-checkbox" name="check-9" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-10">
    																<input id="check-10" class="element-checkbox" name="check-10" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-11">
    																<input id="check-11" class="element-checkbox" name="check-11" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <label for="check-12">
    																<input id="check-12" class="element-checkbox" name="check-12" value="Motul" type="checkbox">
    																<span>Motul</span>
    															</label>
  <button class="box-button">Показать</button>
</div>
<script>
  $(".check label").click(function() {
 var $parentBox = $(this).closest('.check');
  $('.box-button', $parentBox).show();
  clearTimeout($parentBox.data('timeout'));
  $parentBox.data('timeout', setTimeout(function() {
    $('.box-button', $parentBox).hide();
  }, 4000));
  $('.box-button', $parentBox).appendTo(this);
  });
</script>

javascript

2 个回答

  1. Best Answer

    解决办法：按钮只保留一个，取出到最下面。单击时，计算从顶部和左侧的偏移量并将此偏移量设置到按钮。

    var showBtn = $('.box-button');
var checkBlock = $('.check');
var addOffset = 15;
$(".check label").click(function() {

  var offsetTop = $(this).offset().top - 5;
  var offsetLeft = checkBlock.offset().left + checkBlock.width() + addOffset;
  showBtn.offset({top: offsetTop, left: offsetLeft});
  showBtn.show();

  clearTimeout($(showBtn).data('timer'));
  $(showBtn).data('timer', setTimeout(function() {
    showBtn.offset({top: 0, left: 0});
    showBtn.hide();
  }, 4000));
});
    .check {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  overflow-y: scroll;
}

.check label {
  display: block;
  position: relative;
}

.box-button {
  display: none;
  position: absolute;
  right: -10px;
  top: 0;
  background-color: #fc0;
  box-shadow: 1.4px 1.4px 4px rgba(0, 0, 0, 0.35);
  border: none;
  color: #424242;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.box-button::after {
  content: '';
  position: absolute;
  left: -12px;
  top: -1px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fc0;
  clear: both;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="check">
  <label for="check-1">
    <input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-2">
    <input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-3">
    <input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-4">
    <input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-5">
    <input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-6">
    <input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
</div>
<div class="check">
  <label for="check-7">
    <input id="check-7" class="element-checkbox" name="check-7" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-8">
    <input id="check-8" class="element-checkbox" name="check-8" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-9">
    <input id="check-9" class="element-checkbox" name="check-9" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-10">
    <input id="check-10" class="element-checkbox" name="check-10" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-11">
    <input id="check-11" class="element-checkbox" name="check-11" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
  <label for="check-12">
    <input id="check-12" class="element-checkbox" name="check-12" value="Motul" type="checkbox">
    <span>Motul</span>
    </label>
</div>
<button class="box-button">Показать</button>

    因为我想要拐杖，所以我会把它留作 DZ 来猜猜为什么会这样写$(this).offset().top - 5;，var addOffset = 15;然后去掉那些神奇的数字 ;-)

    • 2

  2. 无法在 c 块之外显示任何内容overflow: hidden，因此您需要将“显示”按钮移到块外。单击确定.position().top元素的相对坐标 ( ) 并将它们分配给top按钮的属性。

    $(function() {
  $('label').click(function() {
    var y = $(this).position().top;
    
    $('.show').css('top', y + 'px');
  });
});
    .wrapper {
  position: absolute;
}

.scrollable {
  overflow-y: auto;
  height: 200px;
  width: 200px;
  border: 1px solid;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  padding: 5px;
}

.show {
  position: absolute;
  top: -100px;
  left: 220px;
  text-decoration: none;
  border: 1px solid;
  padding: 5px 10px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=wrapper>
  <div class=scrollable>
    <ul>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
      <li><label><input type=checkbox>Product</label>
    </ul>
  </div>
</div>

<a href="#" class="show">Show</a>

    • 1

相关问题