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上设置状态类，并在toggle()上使用.menu-col根据该状态显示或隐藏它类。试试这个：

$('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();
});

这样的东西应该是你正在寻找的东西，就像我说的那样，应该有一个条件让它再次出现，我做了一个切换所以任何双击任何＆＃39;导航a＆＃ 39; element将导致它显示/隐藏div。

Answer 4

只是为了一个选择。这是双击的另一种方法（连续点击两次）。

使用ondblclick事件。

＆＃13;

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

＆＃13;

如果连续两次单击某个元素，则隐藏div，否则显示

4 个答案: