将 CSS 下拉菜单更改为 Jquery

Question

我已经创建了一个 CSS 下拉菜单，但问题出在平板电脑上，因为它会悬停，我必须在单击时更改它以显示以及单击和鼠标离开时隐藏。我在 css 中有完整的工作示例。

HTML

  <div class="menu">
        <ul class="menu">
            <li class="large-display sub-menus">
                <a class="arrow" href="#">SHOW</a>

                <div class="mega-menu full-width">
                    MENU
                </div>
            </li>
        </ul>
    </div>

这是工作小提琴

http://jsfiddle.net/featzvzo/4/

Answer 1

很简单。无论您在悬停时应用什么 css 属性，都将这些属性全部用于新的 class 也例如 active

因此所有悬停属性现在也将用于活动 class 属性。比单击锚标记将打开该子菜单

   $(document).ready(function(){
    $('ul.menu li').on('click', function(){
     $(this).find('.mega-menu').css('visibility', 'visible');
     $(this).find('.mega-menu').css('opacity', '1');
    });
   })

像这样，您可以将 jQuery 添加到您的菜单中。但是您可能需要更多代码来应用此 jQuery 菜单，例如再次关闭菜单。但首先告诉我它是否有帮助。如果是的话我也可以进一步帮助你

Answer 2

尝试执行如下操作：http://jsfiddle.net/featzvzo/7/

HTML

<ul class="menu">
    <li class="large-display sub-menus"> 
        <a class="arrow" href="#">SHOW</a>
        <div class="mega-menu full-width">MENU</div>
    </li>
</ul>

CSS

.mega-menu {
    display:none;
}

.show {
    display:block;
}

jQuery

$('.arrow').click(function () {
    $(this).next().addClass('show');
    $(this).next().on("mouseleave", function () {
        $(this).removeClass('show');
    });
});

Answer 3

你不能只使用 CSS 来使用可点击元素。你需要JS。

工作示例： http://jsfiddle.net/a5Lh6tuc/2/

JS:

$('.arrow').click(function() {
    var $window = $(window);

    if($window.width() < 866)
    {
        $(this).closest('li').toggleClass('active');
    }
})

$('body').click(function(e) {
    var target = e.target;

    if (!$(target).is('.arrow')) {
        $('.arrow').closest('li').removeClass('active');
    }
});

CSS修改：

@media only screen and (min-width: 867px) {


.menu li:hover > ul,
.menu li:hover > .mega-menu,
.menu li:hover > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

    .menu li:hover > .mega-menu ol li {
        height: auto;
    }
        .menu ul ul li:hover > ul {
            position: relative;
            border: none;
            border-top: 1px solid #e4e4e4;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
}

@media only screen and (max-width: 866px) {


.menu li.active > ul,
.menu li.active > .mega-menu,
.menu li.active > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

    .menu li.active > .mega-menu ol li {
        height: auto;
    }
        .menu ul ul li.active > ul {
            position: relative;
            border: none;
            border-top: 1px solid #e4e4e4;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
}

你需要定义 2 个分辨率掩码（宽度大于 866px，小于 866px）
设置它们（悬停效果或.active class）
使用JS
如果将分辨率更改为高于 866px，则悬停效果有效

将 CSS 下拉菜单更改为 Jquery

Change CSS dropdown megamenu to Jquery

css

jquery

mouseleave