[英]sidr menu close not working in chrome mobile
I am using sidr as side menu for my website. 我将sidr用作网站的侧边菜单。 But when I open it in chrome browser at my phone.
但是当我在手机的Chrome浏览器中打开它时。 It opens when I click the button.
当我单击按钮时,它将打开。 But doesn't close when I click the button again.
但是当我再次单击该按钮时,它没有关闭。 If I use the dolphin browser, it just works fine.
如果我使用海豚浏览器,则可以正常运行。
I've created a Fiddle.. This is my code which opens and closes the menu perfectly, doesn't seem to work here. 我创建了一个小提琴。这是我的代码,可以完美地打开和关闭菜单,在这里似乎不起作用。
JS: JS:
$('#responsive-menu-button').sidr({
name: 'sidr',
source: '#menu',
side: 'left'
});
CSS: 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: 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>
Also my viewport: 还有我的视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code you provided is okay. 您提供的代码还可以。 Additional JavaScript for open/close needed, as you know.
如您所知,还需要其他用于打开/关闭的JavaScript。 This works in web and mobile versions of Google Chrome.
此功能适用于网络版和移动版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>
Please notice where jQuery(".sidr-class-sub-menu").hide();
请注意
jQuery(".sidr-class-sub-menu").hide();
is situated. 位于。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.