单击后悬停事件更改

Question

我有一个标题 div，单击它会打开一个描述 div。当标题悬停并关闭描述时，会出现另一个 div 'read more'。当标题悬停并且描述已经打开时，会出现“少读”。如果在打开另一个描述的同时单击不同的标题，则先前的描述会关闭，而当前的描述会打开。 我的问题是我无法在点击事件后更改悬停事件。

我有一个包含两个代码的 JSFiddle，但未能将它们结合起来。

https://jsfiddle.net/qkp91vgw/8/

    $(".tooltitle").click(function(e) {
      e.preventDefault();
      var $div = $(this).nextAll('.tooldescription');
      var $arrow = $(this).find(".arrow");
        $(".tooldescription").not($div).slideUp('slow');
        $(".arrow").not($arrow).css({'background-image':'url("../media/arrowdown.gif")'});
        if ($div.is(":visible")) {
            $div.slideUp('slow')
            $(this).find(".arrow").css({'background-image':'url("../media/arrowdown.gif")'});
        }  else {
           $div.slideDown('slow');
           $(this).find(".arrow").css({'background-image':'url("../media/arrowup.gif")'});
        }
    });
});

$(document).ready(function(){
    $(".tooltitle").hover(function() {
        if ($(this).nextAll('.tooldescription').is(":visible")) {
    $(".toolreadless").css({
            'left': $(this).offset().left,
            'top': $(this).offset().top + $(this).height() + 5,
    }).stop(true,true).fadeIn(1000);
        }  else {
    $(".toolreadmore").css({
            'left': $(this).offset().left,
            'top': $(this).offset().top + $(this).height() + 5,
    }).stop(true,true).fadeIn(1000);
        }
   },
    function(){
    $(".toolreadmore").css({
            'left': $(this).offset().left,
            'top': $(this).offset().top + $(this).height() + 5,
    }).stop(true,true).fadeOut(500);
        $(".toolreadless").css({
            'left': $(this).offset().left,
            'top': $(this).offset().top + $(this).height() + 5,
    }).stop(true,true).fadeOut(500);
  }
    );
});

代码分离后，如果鼠标离开标题并重新进入，就会出现read less，正如预期的那样。我无法将它们组合起来，因此点击事件会同时更改悬停文本/div。

Answer 1

当您将鼠标悬停在.tooltitle 上时，代码将执行一次，相应地显示正确的阅读更多/更少消息。但是，当您单击 .tootltitle 时，该消息需要更改。负责更改消息的函数不会在点击事件上执行。

简单的解决方案是将您的 CSS 属性以及 fadeOut() 和 fadeIn() 方法添加到点击事件处理程序：

$(document).ready(function() {
  $(".tooltitle").click(function(e) {
    e.preventDefault();
    var $div = $(this).nextAll('.tooldescription');
    var $arrow = $(this).find(".arrow");
    $(".tooldescription").not($div).slideUp('slow');
    $(".arrow").not($arrow).css({
      'background-image': 'url("../media/arrowdown.gif")'
    });
    if ($div.is(":visible")) {
      $div.slideUp('slow')
      $(this).find(".arrow").css({
        'background-image': 'url("../media/arrowdown.gif")'
      });
    } else {

      $(".toolreadmore").fadeOut();
      $(".toolreadless").css({
        'left': $(this).offset().left,
        'top': $(this).offset().top + $(this).height() + 5,
      }).stop(true, true).fadeIn(1000);


      $div.slideDown('slow');
      $(this).find(".arrow").css({
        'background-image': 'url("../media/arrowup.gif")'
      });
    }


  });
});

更复杂的方法可能涉及使用 JQuery .on。允许您将多个事件侦听器（特别是悬停和单击事件）附加到负责更改阅读更多/更少消息的函数。 您可能还需要更改事件处理程序。

类似的东西：

$(".tooltitle").on("mouseover click", function(e)
{

});