Javascript onclick而不是鼠标悬停

Question

$(function() {
    $(".popup").hide();
    $(".clickMe").mouseover(function () {       
        $(".popup").show();
    }).mouseout(function() {
        $(".popup").hide();//Set this to default hide
    }); 
});

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<a class="clickMe" href="#"> Click here to see hidden item.</>
<div class="popup"> You've found me! </div>

我找到了我很想实现但不确定如何实现的代码。而不是鼠标悬停，我怎样才能将它设置为 onclick 调用呢？感谢您的宝贵时间。

Answer 1

这样就可以了

$(function() { 
  $(".popup").hide();                 //Hide the popup first
  $(".clickMe").click(function () {   //Attach a click event to the .clickMe
        $(".popup").toggle();              //Toggle the visibility of the popup
  });
}); 

所以我所做的只是将mouseover 和mouseout 事件更改为单个click 事件，用于具有.clickMe 类的元素。然后使用 jQuery toggle 效果，它将根据 div 是否已经可见来显示或显示，因此“切换”div。更多信息请关注here