将CSS下拉megamenu更改为Jquery

Question

我已经创建了一个CSS下拉菜单，但问题是在平板电脑上，因为它继续悬停，我必须改变它点击显示，点击和鼠标保存隐藏。我在css中有完整的工作示例。

  <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

尝试实现如下内容：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 2

这很简单。无论您在悬停上应用了哪些css属性，都要为一个新类(例如active )使用这些属性。

因此，所有的悬停属性现在也适用于活动类属性。而单击“锚”标记则会打开子菜单。

   $(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 3

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

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

联署材料：

$('.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;
        }
}

1. 你需要定义2个分辨率掩码(宽度大于866 and，且更小)
2. 设置它们(悬停效果或.active类)
3. 使用JS
4. 如果将分辨率更改为高于866 to，则为活动悬停效应。