1

我使用 sidr 作为我网站的侧边菜单。但是当我在手机的 chrome 浏览器中打开它时。当我单击按钮时它会打开。但是当我再次单击该按钮时不会关闭。如果我使用海豚浏览器，它就可以正常工作。

我创建了一个 Fiddle .. 这是我的代码，可以完美地打开和关闭菜单，在这里似乎不起作用。

小提琴

JS：

$('#responsive-menu-button').sidr({
    name: 'sidr',
    source: '#menu',
    side: 'left'
});

CSS： 

#mobile-header {
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
}
#mobile-header #responsive-menu-button {
    height: 41px;
    width: 42px;
    display:block;
}
#menu {
    display: none;
}

HTML：

<div id="mobile-header"> <a id="responsive-menu-button" href="#menu">THE MENU</a>

</div>
<div id="menu">
    <ul>
        <li><a class="menu first" href="#first">First</a>
        </li>
        <li><a class="menu second" href="#second"> Second</a>
        </li>
        <li><a class="menu third" href="#third">third</a>
        </li>
        <li><a class="menu fourth" href="#fourth">fourth</a>
        </li>
    </ul>
</div>

还有我的视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
4

1 回答 1

0

你提供的代码没问题。如您所知，需要额外的用于打开/关闭的 JavaScript。这适用于 Google Chrome 的网页版和移动版。

<script src="http://yoursite.domain.../jquery.sidr.min.js"></script>

<script>
jQuery('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '.menu-main-nav-container'
});

jQuery( window ).load(function() {
if(jQuery("#sidr-main").length !== 0) {        
    jQuery(".sidr-class-sub-menu").hide();      
    jQuery( "li.sidr-class-menu-item ul.sidr-class-sub-menu" ).each(function() {
    jQuery( this ).after("<div class='lnk-plus'>+</div>");
    });

    jQuery( ".lnk-plus" ).toggle(function() {
        var id1= jQuery( this ).parent().attr("id");
        jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
        jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide();   
        jQuery( this ).html("-");
        }, function() {
        var id1= jQuery( this ).parent().attr("id");
        jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
        jQuery( this ).html("+");
        });
        }
    });
</script>

请注意jQuery(".sidr-class-sub-menu").hide();位于何处。

于 2015-04-17T19:22:38.247 回答