jQuery：使用click事件隱藏菜單

Question

我正在努力解決有關這些鼠標懸停/跳出事件的問題。 我單擊了一個元素，它應該在光標附近打開一個菜單（起作用）。 單擊該元素后，它應消失（無效）。 它是d3js和jQuery的結合。

也許您有一個更好的方法，不會出現此問題。

jQuery處理click事件

$(".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類

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

編輯在JsFiddle下，它以某種方式無法運行，但是我包含了所有代碼:-(

JsFiddle代碼

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();

  });
});