Question

这是我的简单检查清单的代码。当用户将鼠标悬停在项目“取出垃圾”上时，鼠标悬停事件可以正常工作，但是当用户点击“取出垃圾”项时，他们会看到鼠标悬停事件和它下面的onclick事件。

控制台中没有错误，不确定我做错了什么。任何帮助都会感激不尽，谢谢。

$("#task1").mouseover(function() {
  $("#hidden").show();
});


$("#task1").mouseleave(function() {
  $("#hidden").hide();
});


$("#task1").on('click', function() {
  $("#hiddenExtend").show();
});

$("#task1").on("click", function() {
  $("#hiddenExtend").hide();
});

#hidden,
#hiddenExtend {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="ui-state-default">
  <div class="checkbox">
    <input type="checkbox" class="checkbox1" value="" />
    <div id="task1">
      <label>
    Take out the 
     trash
    <img src="img/edit.png" id="edit" alt="edit list">
       </label>
      <div id="hidden">
        12/11/17
      </div>
      <div id="hiddenExtend">
        Bins go out on Tuesday
      </div>
    </div>
  </div>


  <li class="ui-state-default">
    <div class="checkbox">
      <input type="checkbox" class="checkbox1" value="" />
      <div id="task1">
        <label>
		Take out the 
         trash
        <img src="img/edit.png" id="edit" alt="edit list">
           </label>
        <div id="hidden">
          12/11/17
        </div>
        <div id="hiddenExtend">
          Bins go out on Tuesday
        </div>
      </div>
    </div>
  </li>

Answer 1

您需要使用if statement中的is()方法检查div是隐藏还是可见，以便实际工作：

var $hiddenExtend = $("#hiddenExtend");

$("#task1").on("click", function() {
  if ($hiddenExtend.is(":hidden")) {
    $hiddenExtend.show();
  } else {
    $hiddenExtend.hide();
  }
});

这同样适用于您的mouseover/mouseleave事件：

var $hidden = $("#hidden");

$("#task1").mouseover(function() {
  if ($hidden.is(":hidden")) {
    $hidden.show();
  }
})
.mouseleave(function() {
  if ($hidden.is(":visible")) {
    $hidden.hide();
  }
});

请注意，我还冒昧地缓存了两个元素：$("#hiddenExtend")和$("#hiddenExtend")，因此DOM不必在每次事件调用时重复搜索它们。

正如Xufox所提到的，虽然设置具有相同ID的多个元素的命名仍然有效，但Web标准仍然禁止它。您可能希望改用类。

Answer 2

你可以试试这个：

$(document).on('click','#task1',function(e){
    $('#hiddenExtend').slideToggle('slow');
});

onclick（）事件不起作用

2 个答案: