Компонент Foundation Accordion: любой якорь внутри предмета аккордеона откроет панель аккордеона - PullRequest
Новая
       24

Компонент Foundation Accordion: любой якорь внутри предмета аккордеона откроет панель аккордеона

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

Используя Аккордеонный компонент Zurb Foundation , я пытаюсь поместить кнопку рядом с названием аккордеона.

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

Вместо этого моя цель - запустить функциональность по умолчаниюякоря, как показано в коде ниже:

<a href="https://google.com" class="tiny button within-title">button that should lead to a target link</a>

Как я могу остановить кнопку (якорь), чтобы прослушать триггер аккордеона и позволить ей привести к цели?

На данный момент у меня есть предварительное решение (на основе моего codepen примера): 

$('.within-title').on('click', (e) => {
   window.location = $(e.currentTarget).attr('href');
})

Вот фрагмент, в качестве альтернативы я сделал ручка для ручки . 

$(document).foundation();
.main {
  max-width: 50%;
  margin: 0 auto;
}
.with-button {
  display: flex;
  justify-content: space-between;
}
.my-brother-is-a-button {
  flex: 1;
}
.within-title {
  margin-bottom:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<!-- This demo uses flex grid but you can use float grid too -->
<div class="main">
<div class="row">
  <div class="columns">
    <h2>Accordion</h2>
    <p>Accordions lets you organize and navigate multiple documents in a single container. Highly useful for switching between items in the container specially when you have a large amount of content.</p>
  </div>
</div>

<div class="row">
  <div class="columns">
    <ul class="accordion" data-accordion data-allow-all-closed="true">
  <li class="accordion-item with-button" data-accordion-item>
    <a href="#" class="accordion-title my-brother-is-a-button">Accordion 1</a>
    <a href="https://google.com" class="tiny button within-title">button that should lead to a target link</a>
    <div class="accordion-content" data-tab-content >
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      <textarea></textarea>
      <button class="button">I do nothing!</button>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content>
      Type your name!
      <input type="text"></input>
    </div>
  </li>
</ul>
  </div>
</div>
</div>

https://codepen.io/mcordeiro/pen/ePVdvL

...