主页 / 问题 / 805873
Accepted
Алексей Соколов
Asked:2020-03-28 17:32:41 +0000 UTC2020-03-28 17:32:41 +0000 UTC

打开下一个时关闭扰流板

  • 772

$(document).ready(function() {
  $('.spoiler_links').click(function() {
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s2-item-wrap spoiler-wrap disabled">
  <a href="#q" class="s2-item spoiler_links">
    <span class="img-wrap"><img src="img/icons/section_2/22.png" alt="Alt">
		</span>
    <span class="s2-item-text">Электротехника</span>
  </a>
  <div class="spoiler-body spoiler_body"><b>Ваш интерес здесь</b>
    <a href="#q" class="button">
      <span class="pulse-button">Вопрос эксперту</span></a>
  </div>
</div>

我用这段js代码做了一个剧透。请帮我做一个，这样当你打开一个时，另一个会自动关闭。

javascript

2 个回答

  1. Best Answer

    像这样，如果你专注于你的 HTML。如果你想要隐藏所有块的相同动画

    $(document).ready(function() {

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

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

      if (nextElem.css('display') === 'block') {
        nextElem.hide();
        return;
      }
      
      nextElem.fadeIn(300);
    });
  });
});
    .spoiler_body {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 2</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 3</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>

    如果活动块的动画应该是相同的展开和隐藏，那么像这样

     $(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(300);
    });
  });
}); 
    .spoiler_body {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 2</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 3</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>

    • 2

  2. 尝试保存之前打开的扰流板。

    示例（角度）：

    onSpoilerClick(newSpoiler) {
    if (this.prevSpoiler && this.prevSpoiler.isOpen && this.prevSpoiler !== newSpoiler) {
      newSpoiler.isOpen = false;
    }
    newSpoiler.isOpen = !newSpoiler.isOpen;
    this.prevSpoiler = newSpoiler;

  }
    • 1

相关问题