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