Измените раскрывающееся меню 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

Попробуйте реализовать что-то вроде этого: 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/

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;
        }
}

1. Вам нужно определить 2 маски разрешения (ширина больше 866 пикселей и меньше)
2. Настройте их (эффект наведения или.active класс)
3. Используйте JS
4. Если изменение разрешения выше 866 пикселей, активен эффект наведения