代码之家 › 专栏 › 技术社区 › Weebs

我如何得到一个链接返回假,如果点击一次,但返回真,如果再次点击?

css html jquery

-3

Weebs · 技术社区 · 7 年前

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

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

});

2 回复 | 直到 7 年前

Rory McCrossan Hsm Sharique Hasan 7 年前

首先注意,当 return 语句已命中。所以你现在 addClass()

您还需要删除 show a 父级的同级中的元素 li

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>

Hearner 7 年前

你有一个 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>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前