Как открыть следующую вкладку в аккордеоне? - PullRequest
Новая
       8

Как открыть следующую вкладку в аккордеоне?

0 голосов
/ 14 октября 2018

Я пытаюсь сделать аккордеон с первой открытой вкладкой.Кнопка должна открыть следующую вкладку и закрыть предыдущую.Пока он просто закрывает вкладку, но не открывает следующую, и мне трудно понять, как заставить это работать. 

$(document).ready(function() {
  $('.cat').click(function() {
    $(this).parent().slideUp('fast');
    $(".a-content").next().css('display', 'block');
  });
});
.a-toggle {
  cursor: pointer;
  margin: 0;
}

.a-content {
  display: none;
}

.a-content.default {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a-section">
  <h4 class="a-toggle">1. Title</h4>
  <div class="a-content default">
    <p>Some text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">2. Title</h4>
  <div class="a-content">
    <p>More text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">3. Title</h4>
  <div class="a-content">
    <p>Even more text</p>
    <button type="button" class="cat">Continue</button>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

Решение в одну строку

Вам нужно две вещи:

  • установить новый next(), поскольку .a-content не является следующим братом после себя,он имеет h4 между
  • , затем при щелчке необходимо установить родительский элемент для того элемента, по которому щелкнули, используя $(this)

. Это можно улучшить, добавив класс вместонастройка CSS inline 

$('.cat').click(function() {
  $(this).parent().slideUp('fast').next().next().addClass('open'); //SlideToggle will work too
});
.a-toggle {
  cursor: pointer;
  margin: 0;
}

.a-content {
  display: none;
}

.a-content.default, .a-content.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a-section">
  <h4 class="a-toggle">1. Title</h4>
  <div class="a-content default">
    <p>Some text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">2. Title</h4>
  <div class="a-content">
    <p>More text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">3. Title</h4>
  <div class="a-content">
    <p>Even more text</p>
    <button type="button" class="cat">Continue</button>
  </div>
</div>
0 голосов
/ 14 октября 2018

Попробуйте это 

$(document).ready(function() {
  $('.cat').click(function() {
    const $parent = $(this).parent();
    $parent.slideUp('fast');
    $parent.nextUntil(".a-content").next().css('display', 'block');
  });
});
0 голосов
/ 14 октября 2018 

$(document).ready(function() {
  $('.cat').click(function() {
    const parent = $(this).parent();
    parent.slideToggle();
    const next = parent.next().next();
    next.slideToggle();
  });
});
.a-toggle {
  cursor: pointer;
  margin: 0;
}

.a-content {
  display: none;
}

.a-content.default {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a-section">
  <h4 class="a-toggle">1. Title</h4>
  <div class="a-content default">
    <p>Some text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">2. Title</h4>
  <div class="a-content">
    <p>More text</p>
    <button type="button" class="cat">Continue</button>
  </div>
  <h4 class="a-toggle">3. Title</h4>
  <div class="a-content">
    <p>Even more text</p>
    
  </div>
</div>
...