主页 / 问题 / 1258635
Accepted
Руслан Мамедов
Asked:2022-03-21 03:23:57 +0000 UTC2022-03-21 03:23:57 +0000 UTC

无法删除 html 文本

  • 772

单击箭头时，我想实现文本下拉列表：

.questions-content__title {
  font-family: 'PT Root UI Medium';
  font-size: 18px;
  line-height: 21.6px;
  width: 1200px;
  height: 54px;
  background-color: #f3f3f3;
  margin-bottom: 16px;
  margin-left: 70px;
}

.questions-content__text {
  display: none;
}

.arrow {
  /* display: inline; */
  position: relative;
  top: -25px;
  left: 1050px;
  background-repeat: no-repeat;
  width: 34px;
}
<div class="questions-content__item">
  <div class="questions-content__title">
    <span>Насколько важно уважать культурные корни еды?
      <div class="arrow">
        <img class='arrow-img' src="img/arrowDown.png" alt="" onclick="arrowClick(this)">
      </div>
    </span>
    <div class="questions-content__text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae fuga rerum quidem commodi
 corrupti, consequuntur distinctio illum. Id repudiandae, ut ad facere odit iure officiis commodi. Soluta sit neque ipsa?</span>
    </div>
  </div>
</div>

<div class="questions-content__item">
  <div class="questions-content__title">
    <span>Безопасно ли облизывать колотушки миксера?
      <div class="arrow">
        <img class='arrow-img' src="img/arrowDown.png" alt="" onclick="arrowClick(this)">
      </div>
    </span>
    <div class="questions-content__text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae fuga rerum quidem commodi
corrupti, consequuntur distinctio illum. Id repudiandae, ut ad facere odit iure officiis commodi. Soluta sit neque ipsa?</span>
    </div>
  </div>
</div>

我的文本进入下一个块，但我需要它超出下一个元素。

点击前

点击后

我尝试使用 JS 找出大小<span>并以相同的方式缩进下一个元素，但什么也没发生。

如果有任何帮助，我将不胜感激，没有必要编写代码。

javascript

1 个回答

  1. Best Answer

    单击箭头时，我想让文本下拉

    这是一个简单而优雅的解决方案：

    function spoiler(obj) {
  obj.className == 'spoiler'?
  obj.className='spoiler revealed':
  obj.className='spoiler';
}
    section {background: #e5e5e5; padding: 2px 4px; -webkit-user-select: none;}
section>div {background: #f3f3f3; padding: 5px 20px; margin: 4px 0;}

.spoiler {position: relative;}
.spoilerContent {display: block; margin-top: 10px;}
.spoiler span {display: none;}
.spoiler.revealed span {display: block;}

.spoiler i {
  cursor: pointer; display: block; position: absolute;
  top: 2px; right: -50px; width: 8px; height: 8px;
  border-top: 2px solid #f68a46; border-right: 2px solid #f68a46;
  transform: rotate(135deg);
}
.spoiler.revealed i {
  top: 6px;
  transform: rotate(-45deg);
}
    <section>
<div>
  Насколько важно уважать культурные корни еды?
  <span class="spoiler" onclick="spoiler(this)">
    <i></i>
    <span class="spoilerContent">
      Офигенно важно!
    </span>
  </span>
</div>
<div>
  Безопасно ли облизывать колотушки миксера?
  <span class="spoiler" onclick="spoiler(this)">
    <i></i>
    <span class="spoilerContent">
      Безусловно!<br>Особенно когда<br>они в работе!
    </span>
  </span>
</div>
</section>

    • 1

相关问题