我有一个类yes的链接,我想在点击链接时显示带有类名div
的{{1}}。我编写了下面的代码,但它不起作用,点击时不显示任何内容。这是我的片段:
(box)
$('.yes').on('click', function(e){ e.preventDefault(); $(this).siblings('.box').toggleClass('active');})
.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
由于
答案 0 :(得分:1)
如果您只有一个方框,为什么不直接使用班级选择器$('.box')
。
$('.box').toggleClass('active');
如果您在每个ul之后有多个.box
,请使用.parents()
$(this).parents('ul').next().toggleClass('active');
$('.yes').on('click', function(e){
e.preventDefault();
$('.box').toggleClass('active');
//$(this).parents('ul').next().toggleClass('active');
})

.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>
&#13;
答案 1 :(得分:0)
它不是你的锚标记的直接兄弟。它是&#34; ul&#34;
的兄弟姐妹
$('.yes').on('click', function(e){ e.preventDefault(); $(this).parents("ul").siblings('.box').toggleClass('active');})
&#13;
.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>
&#13;
答案 2 :(得分:0)
这是因为你的<a href="#tab-1" class="yes">
元素没有兄弟姐妹。 $(this).siblings
没有返回任何内容。
$('.yes').on('click', function(event) {
event.preventDefault();
$(this).parents("ul").siblings('.box').toggleClass('active');
});
展开演示代码段:
$('.yes').on('click', function(event) {
event.preventDefault();
$(this).parents("ul").siblings('.box').toggleClass('active');
});
&#13;
.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>
&#13;
但基本上,你的锚标签和你的盒子不是兄弟姐妹,这可以通过缩进显示:
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
兄弟姐妹需要处于同一水平。也许这个图表可以帮助你更好地理解兄弟姐妹是什么:
答案 3 :(得分:0)
试试这个:
$('.yes').on('click', function(e){
e.preventDefault();
$(this).parents("ul").siblings('.box').toggleClass('active');
return false;
})
return false表示链接不起作用,但onclick中的代码可以正常工作。
答案 4 :(得分:0)
这是因为在你的HTML中,课程是“是”&#39;没有兄弟姐妹。
使用此功能直接显示&#39;框&#39;类
$('.yes').on('click', function(e){
e.preventDefault();
$('.box').toggleClass('active');
});
答案 5 :(得分:0)
你走错了路。请像
一样正确
$('.yes').on('click', function(e){ e.preventDefault(); $(this).closest('ul').next('.box').toggleClass('active');})
.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>
答案 6 :(得分:0)
$('.yes').on('click', function(e){e.preventDefault(); $(this).parents().siblings('.box').toggleClass('active');})
.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}
@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>