jQuery：用click事件隐藏菜单

Question

我正在努力解决有关这些鼠标悬停/事件的问题。我点击了一个元素，它应该打开光标附近的菜单（工作）。点击元素后它应该消失（不起作用）。它是d3js和jQuery的组合。

也许你有一个更好的方法，但没有提出这个问题。

jQuery处理点击事件

$(".btcaccount").click(function(evt){
  $(".btcaction").css({
    top: evt.pageY+1,
    left: evt.pageX+1
  }).show();
});

• .btcaccount：可点击元素
• .btcaction：出现的菜单

jQuery处理mouseout事件

$(".btcaction").click(function(evt){
  $(this).css({
    display: none
   });
});

部分HTML

<ul class="btcaction">
  <li>Actions
    <ul>
      <li><a href="#">Action 1</a></li>
      <li><a href="#">Action 2</a></li>
    </ul>
  </li>
</ul>

d3js - .btcaccount class

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
  .enter().append("circle")
    .attr("r", 10)
    .attr("class", "btcaccount")
    .call(force.drag);

修改 在JsFiddle下它以某种方式不运行但我包括所有代码： - （

JsFiddle Code

Answer 1

不知何故，你必须将隐藏包含在点击上下文中。它现在有效。谢谢你的建议！

// click on account
$(".btcaccount").click(function(evt){
  $(".btcaction").css({
    top: evt.pageY+1,
    left: evt.pageX+1
  }).show();

  // action menue
  $(".btcaction").click(function(){
  $(this).hide();

  });
});