Question

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

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

＆＃13;

$(".button").click(function() {
  $("span").toggle();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以使用

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

Answer 2

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

＆＃13;

$(".button").click(function() {
  $("span").toggle();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

将跨度更改为div可以解决问题，但是你无法真正看到它，因为.caret类是白色的，所以在我的情况下，我将它设为黑色以便它可见。

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

3 个答案: