.toggle display:none 不工作

.toggle display:none not working

我有一个基本的切换脚本,现在当我添加显示 none 并单击按钮时,它不会显示隐藏的内容。

当我删除 display:none 时它会显示克拉,当我单击按钮时它会隐藏它。我希望它有相反的效果。我希望插入符号被隐藏,当我单击按钮时我希望它出现。

$(".button").click(function() {
  $("span").toggle();
});
.caret {
  display: none;
}
.caret:before {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  border-bottom: 25px solid #ffffff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="button"><a href="#tabs1">WHAT'S IN THE BAG</a>
  </li>
  <li class="button"><a href="#tabs3">PLAYER HISTORY</a>
  </li>
</ul>
<span class="caret"></span>

你可以使用

$(".button").click(function() {
  $("span").toggleClass('caret');
});

如果我理解你的问题,你的意图是这样的..

$(".button").click(function() {
  $("span").toggle();
});
.caret {
  display: none;
}
.caret:before {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  border-bottom: 25px solid #ffffff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="button"><a href="#tabs1">click me to toggle span caret</a>
  </li>
  <li class="button"><a href="#tabs3">click me to toogle span caret</a>
  </li>
</ul>
<span class="caret">i appeared.</span>

将跨度更改为 div 解决了问题,但您无法真正看到它,因为 .caret class 是白色的,所以就我而言,我做到了黑色所以可见。

$(".button").click(function() {
  $(".caret").toggle();
});
.caret {
  display:none;
}
.caret:before {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  border-bottom: 25px solid #000;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="button"><a href="#tabs1">WHAT'S IN THE BAG</a>
  </li>
  <li class="button"><a href="#tabs3">PLAYER HISTORY</a>
  </li>
</ul>
<div class="caret"></div>