javascript - 为什么我在 jquery 中添加切换事件时我的按钮会消失？

Question

我想在粗体和普通文本之间切换我为它编写了这段代码，但是当我打开我的页面时，粗体按钮消失了？

    $("#bold").toggle(function() {
    $('.focus').css("font-weight", $(this).val());
    }, function() {
    $('.focus').css("font-weight", "normal");
    });

我的代码有问题吗？请帮助，提前谢谢。

Answer 1

假设您使用的是 jQuery 1.9 或更高版本，问题是.toggle()事件处理方法已从库中删除。所以你实际调用的是.toggle()隐藏/显示元素的函数。（在早期版本的 jQuery 中，两个函数都存在，并且 jQuery 根据传入的参数确定了您的意思。）

您可以使用标准.click()处理程序轻松实现自己的切换：

$("#bold").click(function() {
   var f = !$(this).data("toggleFlag");
   if (f) {
      $('.focus').css("font-weight", $(this).val());
   } else {
      $('.focus').css("font-weight", "normal");
   }
   $(this).data("toggleFlag", f);
});

这使用该.data()方法来跟踪布尔标志以指示要执行的代码。第一次调用单击处理程序时，将返回标志，undefined因为它以前没有设置，但我们只是将其转换为布尔值!（假设您要在第一次单击时执行 if 而不是 else 情况）。

Answer 2

它消失是因为该版本的切换已被弃用和删除，并且在较新版本的 jQuery 中，它所做的只是切换可见性。

你可以这样做：

var state = true;

$("#bold").on('click', function() {
    $('.focus').css("font-weight", state ? this.value : 'normal');
    state = !state;
});

小提琴

Answer 3

点击后我找到消失元素的唯一解决方案......是切换效果完成后的回调函数。这里有一个解释回调函数的链接。

这是我的代码：

jQuery('.menu li.item-487').click(function(){
        jQuery('#main-menu .moduletable .menu li').toggle("slow",function(){jQuery('.menu li.item-487').css('display' , 'block');});

    });