JS Accordion закрывается при нажатии на ссылки внутри

Question

У меня возникли некоторые проблемы с сохранением аккордеона открытым, пока я нажимаю на ссылки внутри выпадающего списка аккордеона.Это страница, посвященная карьере, и когда я открываю отдельные вакансии, я хочу, чтобы пользователи могли открывать приложение в новой вкладке.Есть идеи?

https://www.trinovainc.com/careers.html

<div class="accordion">
  <div class="accordion-panel careers" data-id="panel-1">
    <div class="accordion">
      <h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
    </div>
    <div class="accordion-panel-content panel-1">
      <p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
      <h4>Summary</h4>
      <ul>
        <ul>
          <li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
        </ul>
      </ul>
      <h4>PRIME RESPONSIBILITIES</h4>
      <ul>
        <ul>
          <ul>
            <li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical &amp; PID drawings for various types of field instrument panels.</li>
            <li>Review specifications and provide model codes for products.</li>
            <li>Perform CAD drawings of best practice installation and wiring</li>
            <li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
            <li>Understand commercial issues and terms.</li>
            <li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
            <li>Improve product and technical knowledge.</li>
            <li>Troubleshooting of basic device issues.</li>
          </ul>
        </ul>
      </ul>
      <h4>MINIMUM EDUCATION</h4>
      <ul>
        <ul>
          <ul>
            <li>Bachelor&rsquo;s Degree in Engineering.</li>
            <li>Minor in Sales Engineering is a plus</li>
          </ul>
        </ul>
      </ul>
      <h4>TRAVEL</h4>
      <ul>
        <ul>
          <ul>
            <li>Occasional travel required.</li>
          </ul>
        </ul>
      </ul>
      <h4>PREVIOUS JOB EXPERIENCE</h4>
      <h4>Desired:</h4>
      <ul>
        <ul>
          <ul>
            <li>Previous related experience of at least 2 years</li>
          </ul>
        </ul>
      </ul>
      <h4>Required:</h4>
      <ul>
        <ul>
          <li>None</li>
          <ul></ul>
        </ul>
      </ul>
      <a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
    </div>
  </div>
</div>

Answer 1

Использование event.stopPropagation():

В Javascript у вас есть всплывание событий, что означает, что всякий раз, когда событие запускается для элемента.Это событие всплывает во все родительские элементы.Это означает, что если у вас есть щелчок для аккордеона, чтобы закрыть его, и вы нажмете кнопку (или что-нибудь еще) внутри него, он закроется.Вы можете предотвратить это, используя event.stopPropagation().Это предотвратит распространение события вверх по структуре DOM.

Пример:

function prop(e){
  console.log(e.currentTarget);
}

function notProp(e){
  console.log(e.currentTarget);
  e.stopPropagation();
}

<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>

<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>