如何获得一个链接，如果单击一次返回 false，但如果再次单击，则返回 true?

Question

默认情况下，父菜单项从视图中隐藏。当它们通过鼠标悬停时，会添加类"show"。

但是，我希望类似的概念适用于平板电脑，它依赖于点击或双击。我希望在单击父菜单项时添加类"show"，如果再次单击，则返回 true 并打开链接。

.HTML

<div id="nav">
<li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
<li class="wsite-menu-item-wrap"><a href="#">About</a></li>
<li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>

.CSS

.show {
background:orange;
color:white;
}

jQuery

$('#nav .wsite-menu-item-wrap a').on('click', function() {
if($("#nav .wsite-menu-item-wrap a").hasClass("show")){
return true;
}
else {
return false;
$(this).addClass('show');
}
});

Answer 1

首先请注意，当命中return语句时，逻辑流会退出当前函数。因此，您当前的addClass()不会执行任何操作。

您还需要从父li的同级元素中的a元素中删除show类，并将其删除为单击的元素。

从那里你的逻辑，使用hasClass()，是正确的。试试这个：

$('#nav .wsite-menu-item-wrap a').on('click', function(e) {
if ($(this).hasClass("show")) {
console.log('subsequent click');
} else {
e.preventDefault();
$(this).addClass('show').closest('li').siblings().find('a').removeClass('show');
console.log('first click');
}
});

.show {
background: orange;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
<li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
<li class="wsite-menu-item-wrap"><a href="#">About</a></li>
<li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>

Answer 2

你有一个 toggleClass(( 函数，如果类不存在，则添加它，如果它已经存在，则删除它

$('#nav .wsite-menu-item-wrap a').on('click', function() {
$(this).toggleClass('show');
});

.show {
background:orange;
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
<li class="wsite-menu-item-wrap"><a href="#">About</a></li>
<li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>