У меня есть эта HTML-структура:
<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>
и события jquery для обработки выпадающего списка / события скрытия:
$(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
});
$(document).on('mouseover',".dropdown-content", function (e) {
$(this).css("display", "block");
});
$(document).on('mouseout',".dropdown-content", function (e) {
$(this).css("display", "none");
});
Более того, у меня есть событие нажатия длякласс "ocond", который должен закрывать класс раскрывающегося контента при щелчке по опции в раскрывающемся меню:
$(this).parents('.dropdown-content').css("display", "none");
, но он не закрывается после того, как щелчок остается видимым.Я предполагаю, что это конфликтует с:
$(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
});
из-за того, что dropdownedit является родительским элементом для класса "ocond" и также запускается, когда кто-то нажимает на "ocond" класс.
Я пытаюсь добавить, чтобы предотвратить родительское событие при нажатии на дочернее событие:
$(".dropdownedit .ocond").click(function(e) {
e.stopPropagation();
});
, но безуспешно.Как я мог решить этот конфликт?