javascript - 如果连续单击某个元素两次，则隐藏 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 上设置状态类并且还使用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>