触发mmenu中的关闭功能
问题描述:
我一直在尝试创建一个按钮,它在菜单打开和关闭时进行动画处理。为了做到这一点,我创建了一个简单的功能,在点击按钮时执行API.open();
和API.close();
。代码:触发mmenu中的关闭功能
var API = $("#primary-menu").data("mmenu"),
menuOpen = 0;
$("#menu-button").click(function() {
if(menuOpen === 0){
API.open();
menuOpen = 1;
}
else{
API.close();
menuOpen = 0;
}
});
现在的问题是,当菜单通过点击内容区域
$(".mm-opening #mm-0").click(function(){
console.log("Click Successful");
$("#menu-button").removeClass("close");
});
使用的console.log方法和开发工具关闭按钮不动画,我发现了点击内容区域时点击并未完全注册,因此我无法为图标设置动画。
下面是演示:http://bwdmedia.in/camelport/vendor-panel/ 有人可以解释这个原因吗?或另一种方式来达到相同的结果。
答
非常感谢GitHub社区,我找到了解决方案。
有一个div
与ID #mm-blocker
它可以防止与页面的交互,所以我把它关闭display:none;
和点击现在可以通过JavaScript注册。
答
mmenu上的HTML标签.mm-opened
添加一个类时,菜单被触发,并且当其接近删除它,这样你就可以设定一个时间间隔看,如果HTML标签有此类
如果你使用JQuery,你可以做一些事情喜欢这个。
var thread = setInterval(checkHtmlTag(),20)
function checkHtmlTag(){
var menuOpen;
if ($("html").hasClass("mm-opened")){
menuOpen = true
} else{
menuOpen = false
}
}
答
您可以通过以下超过以下
图标提到
首先的步骤,头部的动画汉堡包图标这个惊人的收藏得到补充动画汉堡,下载CSS,并按照指示。你现在应该有HTML看起来像这样:
<button id="my-icon" class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
如果你需要你的汉堡包图标加以固定,尝试在DIV包装,并使用fixedElements附加。
<div class="Fixed">
<button id="my-icon" class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
菜单
二(也是最后一次),创建菜单,并使用API来打开菜单,并以动画图标。添加一个小超时,以确保页面的其余部分完成动画制作更流畅的动画。
var $menu = $("#my-menu").mmenu({
// options
});
var $icon = $("#my-icon");
var API = $menu.data("mmenu");
$icon.on("click", function() {
API.open();
});
API.bind("open:finish", function() {
setTimeout(function() {
$icon.addClass("is-active");
}, 100);
});
API.bind("close:finish", function() {
setTimeout(function() {
$icon.removeClass("is-active");
}, 100);
});
我认为一个好的解决办法是,如果有人可以经过'jquery.mmenu.min.js'文件,并找出其中究竟是位于代码触发打开和关闭的菜单。我经历了它,但无法理解。 – VeeK