这有点难以解释,但是我有这些行,大约有22行,当我单击一行时,内容面板部分应该向下滑动并显示出来,然后当我再次单击该行时,它应该将其隐藏。现在,单击可显示作品,但是如果我单击向下滑动的内容面板,则会向上滑动,
我只想要它,如果我再次单击该行,它会向上滑动,如果我单击该内容,则什么也不会发生,以便人们可以单击链接和其中的内容而不会关闭它。
这是我的一些代码。
JQUERY:
var main = function() {
$(".article").click(function() {
$('.article').removeClass('current');
$(this).addClass('current');
$(this).children('.description').slideToggle();
});
};
$(document).ready(main);
这是HTML,仅占22行的1行:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="articles container">
<div class="article">
<div class="item row">
<div class="col-md-3">
<p class="source">Content</p>
</div>
<div class="col-md-6">
<p class="title">"Content"</p>
</div>
<div class="col-md-3">
<p class="pubdate">Content</p>
</div>
</div>
<div class="description row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<p>Content</p>
</div>
<div class="col-md-3"> </div>
</div>
</div>
<div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="example.js"></script>
<html>
这是随附的CSS:不包括我正在使用的引导程序。
.articles {
margin-top: 10px;
margin-bottom: 10px;
}
.article {
color: white;
background: black;
border-spacing: 10px;
border-color: black;
font-family: arial,sans-serif;
border-bottom: 5px #e5e5e5 solid;
}
.current .item {
background: grey;
}
.item {
cursor: pointer;
padding-top: 10px;
padding-bottom: 10px;
}
.item .source {
margin-left: 20px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 20px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-bottom: 5px;
background: black;
}
我认为这是该问题的唯一相关代码:
最佳答案
你可以用这样的东西
var main = function() {
$(".article").click(function() {
$('.article').not($(this)).removeClass('current');
if($(this).hasClass('current')){
// if this clicked before and has class current already
// in second click
// code here
}else{
// if this first click
$(this).addClass('current');
// code here
}
});
};