Question

我的移动菜单还有其他问题。它应该像这样工作：

http://www.velux.pl/（asp.net框架）

我尝试在jquery中写入逻辑，但它无法正常工作。我希望通过类服务滑入和滑出div的效果，但它只显示和淡化。在某些元素上，可以为左侧或右侧的属性设置动画，但是对于具有类服务的元素，它不起作用。他们都给了财产：亲属。所以这不是原因。实际上我没有动画效果，元素只显示和隐藏。在控制台属性中，左侧根本没有修改。我不知道为什么因为例如带有类menu-header的元素一切正常。

我的错误在哪里？

HTML（简易版）

<nav class="active">

                <div class="regular">
                    <ul class="open">
                        <li class="sub-menu ">
                            <div class="menu-item"> Produkty </div>
                            <div class="menu-header"> Produkty </div>
                            <ul class="innerTextMenu>
                                <li> <a class="menu-link" href="/produkty/okna-dachowe" target="">Okna dachowe</a> </li>
                                <li> <a class="menu-link" href="" target="">Okna do płaskiego dachu</a> </li>

                            </ul>
                        </li>
                        <li class="sub-menu ">
                            <div class="menu-item"> Nasze wsparcie </div>
                            <div class="menu-header"> Nasze wsparcie </div>
                            <ul class="innerTextMenu">
                                <li> <a class="menu-link" href="/dla-klienta/serwis" target="">Obsługa posprzedażowa</a> </li>
                                <li> <a class="menu-link" href="/dla-klienta/zanim-kupisz" target="">Obsługa przedsprzedażowa</a> </li>

                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="service">
                    <ul class="level-1 service-menu">
                        <li class="sub-menu"> <a class="menu-link" href="http://www.veluxshop.pl" target="" onclick="dataLayer.push({'eventcategory': 'External links', 'eventaction': 'www.veluxshop.pl', 'eventlabel': 'undefined', 'event': 'eventga'});">Sklep z roletami</a> </li>
                        <li class="sub-menu"> <a class="menu-link" href="/dla-klienta/katalogi-i-broszury" target="">Znajdź katalog</a> </li>
                        <li class="sub-menu"> <a class="menu-link" href="http://prasa.velux.pl/" target="" onclick="dataLayer.push({'eventcategory': 'External links', 'eventaction': 'prasa.velux.pl', 'eventlabel': '/', 'event': 'eventga'});">Biuro prasowe</a> </li>
                    </ul>
                </div>
            </nav>

JQuery的

    jQuery.fn.clickToggle = function(a,b) {
    function cb(){ [b,a][this._tog^=1].call(this); }
    return this.on("click", cb);

}

    $(".sub-menu").clickToggle(function() {   
        $(this).addClass('active');
        $('.menu-item').animate({'left':'-100%'}, 'slow', 'linear');
        $('.menu-header').css('right' , '0%');
        $('.service').addClass('is-hidden');
        $('.service').animate({'left:':'-100%'}, 'slow' , 'linear');
    }, function() {
        $(this).removeClass('active');
        $('.menu-item').animate({'left':'0%'}, 'slow', 'linear');
        $('.menu-header').css('right' , '-100%');
        $('.service').removeClass('is-hidden');
        $('.service').animate({'left:':'0%'}, 'slow' , 'linear');
     });

CSS

.is-hidden {
display: none !important;
transition:0.5s;

}

不幸的是，由于代码量很大，我无法添加代码段。

现在我的网站似乎就是这样：

http://gbaniekty.pl/mobile-menu/index.html

具有leftt位置的Animate不起作用

0 个答案: