Аккордеон внутри Dropdown без jQuery? - PullRequest
Новая
       36

Аккордеон внутри Dropdown без jQuery?

0 голосов
/ 23 сентября 2019

Я хочу, чтобы в моем выпадающем меню был гармошка.Однако при нажатии на аккордеон, чтобы открыть / закрыть его, весь раскрывающийся список рушится.Вместо этого я хочу, чтобы раскрывающийся список оставался открытым, а аккордеон свободно открывался / закрывался.

Ознакомьтесь с демонстрацией здесь 

<div class="btn-group dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>

    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
              Collapsible Test
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            <button class="dropdown-item" type="button">Test</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Похоже, есть много похожихвопросы там, но я не могу найти правильное решение.Многие ответы предлагают использовать jQuery для решения этой проблемы.Есть ли способ сделать это без?

Я считаю, что использование data-boundary или data-parent может быть способом сделать это, но я не могу понять, как.

Ответы [ 2 ]

3 голосов
/ 23 сентября 2019

Этого можно добиться, добавив событие onclick к кнопке, которое предотвращает распространение щелчка вниз до раскрывающегося списка.Затем вам нужно вручную обработать добавление соответствующих классов collapse или collapse.show к содержанию аккордеона в функции onclick следующим образом: 

function toggleAccordion(event) {
  event.stopPropagation();
  var collapsable = document.getElementById('collapseOne');
  var classList = collapsable.classList;
  if(classList.contains('collapse')) {
    classList.replace('collapse', 'collapse.show');
  } else if (classList.contains('collapse.show')) {
    classList.replace('collapse.show', 'collapse');
  }
}

и HTML-код с добавленным событием click: 

<div class="btn-group dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>

    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button type="button" class="btn btn-link" onclick="toggleAccordion(event)">
              Collapsible Test
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            <button class="dropdown-item" type="button">Test</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я изменил ваш JSFiddle, чтобы показать работающее решение, и вы можете найти его здесь .Еще одно замечание: для этого мне пришлось изменить тип загрузки JS на No wrap - bottom of <head/body>.

0 голосов
/ 23 сентября 2019

Пока @Jake дал верный ответ, я обнаружил «хак» некоторых видов, который позволяет эту работу без написания дополнительных JS.

Просто замените аккордеон div на тег form. 

<div class="btn-group dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>

    <form id="accordion">

        <div  id="headingOne">
          <h5 class="mb-0">
            <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
              Collapsible Test
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" data-parent="#accordion">
          <div class="card-body">
            <button class="dropdown-item" type="button">Test</button>
          </div>
        </div>

    </form>

  </div>
</div>

К сожалению, я не знаю, почему это работает, поэтому я не могу указать причину в ответе.

...