.toggle display:none 不工作

Question

我有一个基本的切换脚本，现在当我添加显示 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>

Answer 1

你可以使用

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

Answer 2

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

$(".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>

Answer 3

将跨度更改为 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>

.toggle display:none 不工作

.toggle display:none not working

css

jquery

show

toggle

hide