如果连续两次单击某个元素，则隐藏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>