Question

出于某种原因，我的“.ddls”在文档加载时被隐藏，尽管这是我的所有脚本：

<div class="code">
    <a href="#" class="ddls" data-clicked="no">Spotify</a>
    <a href="#" class="ddls" data-clicked="no">YouTube</a>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".ddls").toggle(function(){
        $(this).addClass("hovered");
        $(this).attr("data-clicked", "yes");
        console.log("hehe");
    }, function(){
        $(this).removeClass("hovered");
        $(this).attr("data-clicked", "no");
        console.log("haha");
    });
});
</script>

您可以在http://haakon.underbakke.net/musikk

看到它

Answer 1

不推荐使用toggle() - api.jquery.com/toggle-event

您可以重构使用简单的click事件：

$(".ddls").click(function() {
    $(this).toggleClass("hovered");
    var clickedAttr = $(this).attr("data-clicked") == "yes" ? "no" : "yes";
    $(this).attr("data-clicked", clickedAttr);
});

Answer 2

我认为你误解了.toggle（）。请参阅jQuery文档：http://api.jquery.com/toggle/

在准备好文档时，您可以使用类＆＃34; ddls＆＃34;来切换元素的可见性... ...您传入的两个函数很可能被jQuery切换函数抛弃（因为它们不会被＆＃39; t映射到为其定义的任何参数（参见上面的文档）。

听起来你想要为$（＆＃34; .ddls＆＃34;）添加点击监听器，并切换课程＆＃34; hover＆＃34;点击后点击数据的数据：

$(".ddls").click(function () {
  var elem = $(this);
  elem.toggleClass("hovered");
  if (elem.attr('data-clicked') === 'yes') {
    elem.attr('data-clicked', 'no');
  } else {
    elem.attr('data-clicked', 'yes');
  } 
});

请参阅： http://api.jquery.com/click/ http://api.jquery.com/toggleclass/

jQuery在document.load上切换隐藏元素

2 个答案: