如果連續兩次單擊某個元素，則隱藏div，否則顯示

Question

我的導航欄中有幾個項目，旁邊有一個div ，即：

<nav>
  <a id="a"></a>
  <a id="b"></a>
  <a id="c"></a>
</nav>
<div id="menu-col"></div>

如果連續兩次點擊相同的鏈接，我想隱藏#menu-col 。 如果沒有，我希望#menu-col保持可見。

我不是一個javascript的家伙所以我試過這個：

var lastClicked;
$('nav a').on('click', function(e) {
    alert(e.target.id + " - " + this.lastClicked);
    if (e.target.id == this.lastClicked) {
        $('#menu-col').hide();
        this.lastClicked = '';
    }
    else {
        $('#menu-col').show();
        this.lastClicked = e.target.id;
    }
});

然后我記得javascript分配引用，而不是值。 所以當我這樣做時this.lastClicked = e.target.id; 我正在為我的元素的id分配一個引用，然后在下一次單擊時我創建了e.target.id == '' 。

在javascript中，如果同一個鏈接被點擊兩次，如果沒有確保該框是可見的，那么關閉框的正確方法是什么。

Answer 1

您可以使用toggleClass()在單擊的a上設置一個狀態類，並使用.menu-col上的toggle()來顯示或隱藏它基於該狀態類。 嘗試這個：

 $('nav a').click(function(e) { e.preventDefault(); var $a = $(this); $a.toggleClass('active').siblings().removeClass('active'); $('.menu-col').toggle($a.hasClass('active')); }); 

 .menu-col { display: none; } .active { color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <a id="a" href="#">a</a> <a id="b" href="#">b</a> <a id="c" href="#">c</a> </nav> <div class="menu-col">menu-col</div> 

Answer 2

只要你在你的應用程序中保持這些ID是獨一無二的（無論如何你都應該這樣做），你所選擇的方法並沒有錯。 javascript中的任何原語實際上都是按值存儲的。 這些原語是字符串，數字，布爾值和符號。 有關詳細信息，請參閱https://developer.mozilla.org/en-US/docs/Glossary/Primitive

Answer 3

我會建議像這樣的東西，你應該有一些條件，其中div顯示隱藏后。

$('nav a').dblclick(function(event) {
    event.preventDefualt();
    alert($(this).attr('id'));
    $('#menu-col').toggle();
});

這樣的東西應該是你正在尋找的東西，就像我說的那樣，應該有一個條件，它再次顯示自己，我做了一個切換所以任何雙擊任何'nav a'元素將導致它顯示/隱藏div。

Answer 4

只是為了一個選擇。 這是雙擊的另一種方法（連續點擊兩次）。

使用ondblclick事件。

 <a href="#" ondblclick="console.log('Double clicked!');">Double-click me.</a>