JS Accordion закрывается при нажатии на ссылки внутри
У меня возникли проблемы с открытием аккордеона при нажатии ссылок в раскрывающемся списке аккордеона. Это страница карьеры, и когда я открываю отдельные вакансии, я хочу, чтобы пользователи могли открывать приложение в новой вкладке. Любые идеи?
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 & 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’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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используйте event.stopPropagation():
В Javascript у вас есть всплытие событий, что означает, что всякий раз, когда событие запускается для элемента. Это событие всплывает для всех родительских элементов. Это означает, что если у вас есть щелчок для аккордеона, чтобы закрыть его, и вы нажмете кнопку (или что-то еще) внутри него, он закроется. Вы можете предотвратить это, используя event.stopPropagation(). Это остановит распространение события по структуре DOM.
Пример:
function prop(e){
console.info(e.currentTarget);
}
function notProp(e){
console.info(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>На самом деле я еще не понял этого.
У меня возникли проблемы с открытием кнопки применения, которая находится внутри этого аккордеона.
'есть некоторые проблемы' ... Это те же проблемы, которые описаны в вопросе?
@sotechworks. Попробуйте добавить это в тег a («кнопка применения»): onclick = "event.stopPropagation()"
Да, извините, такие же проблемы.
добавить это к этому? <a class = "button orange apply" href = "trinovainc.com/job-application.html" target = "_blank"> Подать заявку сейчас </a> </div>
да тег a
@sotechworks так ... <a class = "button orange apply" href = "trinovainc.com/job-application.html" target = "_blank" onclick = "event.stopPropagation()">Apply Now</a>
@sotechworks, добро пожаловать. Примите ответ, установив рядом с ним галочку. Удачного кодирования !!
@sotechworks Вы еще не догадались? Если вам нужны дополнительные разъяснения, дайте мне знать.