主页 / 问题 / 807252
Accepted
Алексей Соколов
Asked:2020-03-31 01:26:09 +0000 UTC2020-03-31 01:26:09 +0000 UTC

从扰流板到中心的文本输出

  • 772

我使用了剧透，如何使从链接延伸的文本不在链接下方延伸的底部，而是在窗口的中心，这样当您单击链接时，会有一个带有此开口的滚动文本

$(document).ready(function() {

  $('.spoiler_links').each(function() {

   $(this).click(function(e) {
      e.preventDefault(); //отменяем стандартное действие ссылки
      $('.spoiler_body').not($(this).next()).each(function() {
        $(this).hide();
      });

      $(this).next('.spoiler_body').fadeToggle(500);
    });
  });
}); 
.spoiler-wrap{
  margin: 0 0 8px;}

.spoiler-head{
  cursor: pointer;
  padding: 5px;}

.spoiler-wrap .disabled .spoiler-body{
    display: none;}
a.s2-item.spoiler_links {
  margin: 30px 0 18px;}
.spoiler_body {
  display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="all">
<div class="spoiler-wrap disabled">


  <a href="#w" class="month spoiler_links">
    <div class="number r1">
      <div class="number2">
        <b>1</b>
        <p>месяц</p>
      </div>
    </div>
    <div class="transit t1">
      <img src="img/arrow-long.png" alt="">
    </div>
  </a>

<div class="spoiler-body spoiler_body">
  <div class="spoiler-body2 spoiler_body2">
    <p class="choice">ваш выбор</p>
    <div class="number">
      <div class="number2">
        <b>1</b>
        <p>месяц</p>
      </div>
    </div>
  </div>
</div>

</div>


<div class="spoiler-wrap disabled">

<a href="#w" class="month spoiler_links">
  <div class="number">
    <div class="number2">
      <b>3</b>
      <p>месяца</p>
    </div>
  </div>
  <div class="transit t2">
    <img src="img/arrow-long.png" alt="">
  </div>
</a>

<div class="spoiler-body spoiler_body">
  <div class="spoiler-body2 spoiler_body2">
    <p class="choice">ваш выбор</p>
    <div class="number">
      <div class="number2">
        <b>3</b>
        <p>месяца</p>
      </div>
    </div>
  </div>
</div>

</div>
</div>

html

1 个回答

  1. Best Answer

    首先，修复代码中的错误。任何链接都是内联元素，而 div 是块元素。您不能将块元素放置在内联元素中，相反，您可以。

    <a><div>ссылка</div></a> - так нельзя
<div><a>ссылка</a></div> - так можно

    此外，代码中还有很多额外的块和类，但如果这是其他代码的一部分，那么我们保持原样。

    用 JS 写循环是没有意义的，因为 点击事件发生在被点击的元素上，即 处理程序将在此元素上工作。

    $(document).ready(function() {
   $('.spoiler_links').click(function(e) {
      e.preventDefault();
      $('.spoiler_body').hide();
      $(this).next().fadeIn(500);
    });
}); 
    .spoiler-wrap{
  margin: 0 0 8px;
  display: flex;
}

.spoiler-head{
  cursor: pointer;
  padding: 5px;}

.spoiler-wrap .disabled .spoiler-body{
    display: none;}
a.s2-item.spoiler_links {
  margin: 30px 0 18px;}
.spoiler_body {
  display:none;
}
.spoiler-body {
  margin: auto;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="all">
  <div class="spoiler-wrap disabled">

    <a href="#w" class="month spoiler_links">
      <span class="number r1">
        <span class="number2">
          <b>1</b>
          <span>месяц</span>
        </span>
      </span>
      <span class="transit t1">
        <img src="img/arrow-long.png" alt="">
      </span>
    </a>

    <div class="spoiler-body spoiler_body">
      <div class="spoiler-body2 spoiler_body2">
        <p class="choice">ваш выбор</p>
        <div class="number">
          <div class="number2">
            <b>1</b>
            <p>месяц</p>
          </div>
        </div>
      </div>
    </div>

  </div>
  
  <div class="spoiler-wrap disabled">
    <a href="#w" class="month spoiler_links">
      <span class="number">
        <span class="number2">
          <b>3</b>
          <span>месяца</span>
        </span>
      </span>
      <span class="transit t2">
        <img src="img/arrow-long.png" alt="">
      </span>
    </a>

    <div class="spoiler-body spoiler_body">
      <div class="spoiler-body2 spoiler_body2">
      <p class="choice">ваш выбор</p>
      <div class="number">
        <div class="number2">
          <b>3</b>
          <p>месяца</p>
        </div>
      </div>
    </div>
  </div>

</div>
</div>

    • 1

相关问题