1

Вот HTML

<div class="flex">
    <a href="#" class="chart_tab"><span>30 дней</span><span data-tab-dropdownmenu = "tab_menu_1" class="dropdown_btn_3"></span></a>
</div>
<div class="tab_menu" data-dropdownmenu = "tab_menu_1">
    <ul>
        <li><a href="#">10 дней</a></li>
        <li><a href="#">20 дней</a></li>
        <li><a href="#">30 дней</a></li>
        <li><a href="#">40 дней</a></li>
    </ul>
</div>

Вот CSS

.dropdown_btn_3 {
    display: block;
    width: 14px;
    height: 9px;
    cursor: pointer;
}

.chart_tab .dropdown_btn_3 {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    z-index: 3;
}

.tab_menu {
    display: none;
    width: 80px;
    margin-top: 10px;
    padding: 10px 10px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3;
}

.tab_menu.visible {
    display: block;
}

Вот JQuery

$("[data-tab-dropdownmenu]").on("mouseover", function() {
    menu = $("[data-dropdownmenu = '"+$(this).attr("data-tab-dropdownmenu")+"']");
    topCoord = $(this).offset().top + 12;
    leftCoord = $(this).offset().left - 70;
    menu.addClass("visible");
    menu.offset({top: topCoord, left: leftCoord});
});

$("[data-tab-dropdownmenu]").on("mouseleave", function() {
    menu = $("[data-dropdownmenu = '"+$(this).attr("data-tab-dropdownmenu")+"']");
    leftCoord = -$(window).width()*2;
    menu.offset({left: leftCoord});
    menu.removeClass("visible");
});

Контейнер .flex имеет определенную высоту и она меньше чем высота меню .tab_menu. Контейнер .flex имеет свойство overflow:hidden.
Поэтому нужно при наведении на .dropdown_btn_3 это меню спозиционировать и убрать его только при уведении курсора от .dropdown_btn_3 и .chart_tab. Также если курсор на меню .tab_menu, то меню тоже не должно убираться. Как это сделать?

1 ответ 1

1

Добавил в JS

$("[data-dropdownmenu]").on("mouseover", function() {
    menuName = $(this).attr("data-dropdownmenu");
    btn = $("[data-tab-dropdownmenu = '"+menuName+"']");
    topCoord = btn.offset().top + 12;
    leftCoord = btn.offset().left - 70;
    $(this).addClass("visible");
    $(this).offset({top: topCoord, left: leftCoord});
});

$("[data-dropdownmenu]").on("mouseleave", function() {
    menuName = $(this).attr("data-dropdownmenu");
    leftCoord = btn.offset().left - 70;
    leftCoord = -$(window).width()*2;
    $(this).offset({left: leftCoord});
    $(this).removeClass("visible");
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.