单击后悬停事件更改

Question

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

我有一个包含这两个代码的 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);
  }
    );
});

代码分离后，如果鼠标离开标题和 re-enters，如预期的那样，会出现 read less。我无法将它们组合起来，因此点击事件会同时更改悬停 text/div。

Answer 1

当您将鼠标悬停在 .tooltitle 上时，代码将执行一次，相应地显示正确的阅读 more/less 消息。但是，当您单击 .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。允许您将多个事件侦听器（特别是悬停和单击事件）附加到负责更改读取 more/less 消息的函数。您可能还需要更改事件处理程序。

大致如下：

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

});

单击后悬停事件更改

Hover event change after click

html

css

jquery

jquery-ui