当.hover已经应用时，在点击时阻止div？

Question

我有一个元素，当悬停时，.show（）会在屏幕右侧显示一个div。默认情况下，该div有'display：none'。当鼠标不再悬停元素时，执行 .hide（）：

var gacHoverElement = ".gacPreviewPostContainer";
$(gacHoverElement).hover(function() {
        var idx = $(this).index(gacHoverElement);
        $("#gacHover" + idx).show();
    },function() {
        var idx = $(this).index(gacHoverElement);
        $("#gacHover" + idx).hide();
    });

代码工作得很好，现在我想要一个.click（）函数，如果单击 ，即使鼠标徘徊，div也会粘在右侧元素。我尝试了一些没有成功的事情。

有什么想法吗？

示例：

var gacHoverElement = ".gacPreviewPostContainer";
$(gacHoverElement).hover(function() {
    	var idx = $(gacHoverElement).index(gacHoverElement);
    	$("#gacHover" + idx).show();
    },function() {
    	var idx = $(gacHoverElement).index(gacHoverElement);
    	$("#gacHover" + idx).hide();
    });

.gacPreviewPostContainer {background-color: aqua;width: 50px;height: 50px;text-align: center;font-size: 10px;line-height: 45px;cursor: pointer;margin-bottom: 5px;}
.gacHoverContainer {overflow: auto;display: none;background-color: #EEEEEE;height: 100%;width: 30%;position: fixed;top: 0;right: 0;z-index:2003;border-left: 6px solid #448aff;box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 10px;padding: 20px;}
.gacHoverContainer {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gacPreviewPostContainer"><span>Preview</span></div>
<div class="gacPreviewPostContainer"><span>Preview</span></div>
<div class="gacPreviewPostContainer"><span>Preview</span></div>
<div class="gacPreviewPostContainer"><span>Preview</span></div>
<div id="gacHover0" class="gacHoverContainer">
<div id="gacHover1" class="gacHoverContainer">
<div id="gacHover2" class="gacHoverContainer">
<div id="gacHover3" class="gacHoverContainer">

Answer 1

点击TOGGLING HIDE / SHOW的工作示例：

＆＃13;

＆＃13;

var gacHoverElement = ".gacPreviewPostContainer";

var attachHover = function() {
  console.log("attaching");
  $(gacHoverElement).hover(function() {
    var idx = $(this).index(gacHoverElement);
    $("#gacHover" + idx).show();
  }, function myhandler() {
    var idx = $(this).index(gacHoverElement);
    $("#gacHover" + idx).hide();
  });
}
$(gacHoverElement).each(function() {
  $(this).click(function() {
    var ev = $._data(this, 'events');
    if (ev && ev.mouseover && ev.mouseout) {
      $(gacHoverElement).unbind('mouseenter mouseleave')
    } else {
      attachHover();
    }
  })
})
attachHover();

＆＃13;

.gacPreviewPostContainer {
  background-color: aqua;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  line-height: 45px;
  cursor: pointer;
  margin-bottom: 5px;
}
.gacHoverContainer {
  overflow: auto;
  display: none;
  background-color: #EEEEEE;
  height: 100%;
  width: 30%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2003;
  border-left: 6px solid #448aff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 10px;
  padding: 20px;
}
.gacHoverContainer {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gacPreviewPostContainer"><span>Preview1</span>
</div>
<div class="gacPreviewPostContainer"><span>Preview2</span>
</div>
<div class="gacPreviewPostContainer"><span>Preview3</span>
</div>
<div class="gacPreviewPostContainer"><span>Preview4</span>
</div>
<div id="gacHover0" class="gacHoverContainer">11111111111111111111</div>
<div id="gacHover1" class="gacHoverContainer">22222222222222222222</div>
<div id="gacHover2" class="gacHoverContainer">33333333333333333333</div>
<div id="gacHover3" class="gacHoverContainer">44444444444444444444</div>

＆＃13;

＆＃13;

＆＃13;