Question

我有一个标题div，当单击该标题时会打开一个描述div。当标题悬停且说明关闭时，将显示另一个div“更多”。当标题悬停并且说明已经打开时，将显示“ read read”。如果在打开另一个描述时单击另一个标题，则前一个描述将关闭，而当前描述将打开。我的问题是单击事件后无法使悬停事件发生变化。

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

将代码分开，如果鼠标离开标题并按预期重新输入，则会显示较少的内容。我无法将它们组合在一起，因此click事件会同时更改悬停文本/ div。

Answer 1

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

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

$(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)
{

});

单击后悬停事件更改

1 个答案: