所以我在使用这个按钮执行上述任一功能时遇到一点麻烦......
它不是很好,因为baseexpand和fullcollapse应该是类,但我不够熟练,不能重新编写一整套函数来容纳它,因为它们有大约50个依赖项。
无论如何,这是两个函数......
// Full collapse
$( '#fullcollapse' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'collapse' );
});
// Base expand
$( '#baseexpand' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'expand' );
});
他们展开并折叠侧边栏菜单....我有2个看起来像这样的按钮....
<a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>
<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>
我希望将这些按钮设置为在每次点击时在ID之间切换的一个切换按钮。
我现在已经阅读了大约6个小时的文档并尝试查看它但无法解决这个问题。请帮忙
答案 0 :(得分:2)
尝试使用此包装器编写函数
var toggle = function (funcA, funcB) {
var flag = true;
return function () {
if (flag) {
funcA();
} else {
funcB();
}
flag = !flag;
};
};
将其应用于
$('#btn').click(toggle (function (){
$('#menu').multilevelpushmenu( 'collapse' ); // happens 1, 3, 5, 7, ... time clicked
}, function (){
$('#menu').multilevelpushmenu( 'expand' ); // happenes 2, 4, 6, 8, ... time clicked
}));
奖励我重新实现了切换,以便能够传播返回值。
var toggle = function (a, b) {
var togg = false;
return function () {
// passes return value back to caller
return (togg = !togg) ? a() : b();
};
};
答案 1 :(得分:1)
点击此处观看现场演示:https://jsfiddle.net/gpnsmbvk/1/
您可以通过不同的方式实现您的要求。这是一个切换类的解决方案:
<强> HTML 强>
<a id="anyofthestates" class="nav-toggle" role="button" href="#"><span>sidebar me</span></a>
<强> Jquery的强>
$(function(){
$('#anyofthestates').click(function(){
$(this).toggleClass('expand');
if($(this).hasClass('expand')){
alert('baseexpand');
// $( '#menu' ).multilevelpushmenu( 'expand' );
}
else{
alert('fullcollapse');
// $( '#menu' ).multilevelpushmenu( 'collapse' );
}
});
});
答案 2 :(得分:0)
我会更改按钮本身的数据属性(状态可以存储在DOM中的任何其他位置,就像在菜单上一样)并在每次点击时在两种状态之间切换:
$('.nav-toggle').click(function(e){
e.preventDefault();
$('#menu').multilevelpushmenu($(this).data('action'));
$(this).data('action', ($(this).data('action') == 'fullcollapse' ? 'basexpand' : 'fullcollapse'));
});
HTML:
<a data-action="fullcollapse" class="nav-toggle" role="button"><span></span></a>
您在HTML中设置的data-action
应该是您第一次点击时想要的操作。
使用通用multilevelpushmenu
函数的示例:https://jsfiddle.net/q3c117yr/
答案 3 :(得分:0)
假设您只有那两个带有nav-toggle
DOM的按钮。
HTML:
<a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>
<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>
JS:
$(function () {
var expand = false;
$('.nav-toggle').on('click', function (e) {
// not preventing default in case other things are listening if not then prevent it here.
expand = !expand;
var action = expand ? 'expand' : 'collapse';
$('#menu').multilevelpushmenu(action);
});
});
使用data
不起作用的原因是因为数据属性绑定到您选择的元素。每个按钮都有自己的数据属性,因此您无法通过这一个值同步两个按钮。您需要有一个可由两者访问的单独值,以保持其状态同步。