我创建了一个简单的函数来切换菜单(有两个，一个在左边，一个在右边)。
如果我第一次切换，一切正常。
如果我第二次切换(关闭按钮)，它找不到数据菜单属性。我不明白为什么首先有效，其次无效？
$('.dots-menu').toggle(
function() {
console.log( $(this).data('menu') )
$( this ).children().addClass( "on" );
$( '#dot-menu-event').addClass('open');
}, function() {
$( this ).children().removeClass( "on" );
$( '#dot-menu-event').removeClass('open');
}
);
这是我的 HTML 代码
<div data-menu="event" class="dots-menu header absolute xbg-red-500 z-50 left-0 p-6">
<button class="dots outline-none focus:outline-none"><span></span></button>
当我打印 $(this) 时，我实际上得到了带有 data-menu="event" 的 div。
<div data-menu="event" class="dots-menu header absolute xbg-red-500 z-50 left-0 p-6">…</div>
为什么 JQuery 找不到数据菜单？我该如何解决这个问题？
最佳答案
Jquery toggle() 方法在 1.9 版本中被移除。所以你可以尝试我写的以下替代方法。这应该完全相同。
$.fn.toggleIt = function() {
var _args = arguments, i = 0;
$(this).click(function() {
i = (i == _args.length) ? 0: i;
_args[i++].call(this);
});
};
举个例子
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$.fn.toggleIt = function() {
var _args = arguments, i = 0;
$(this).click(function() {
i = (i == _args.length) ? 0: i;
_args[i++].call(this);
});
};
$("p").toggleIt(
function(){ $(this).css({"color": "red"});},
function(){ $(this).css({"color": "blue"});},
function(){ $(this).css({"color": "green"});
});
});
</script>
</head>
<body>
<p style="font-size:40px">Click me.</p>
<div><b>Note:</b> Click to toggle between colors </div>
</body>
</html>关于javascript - 在切换功能中，data() 或 attr ('data-menu' ) 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59295893/