这有点难以解释,但是我有这些行,大约有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">&nbsp;</div>
             <div class="col-md-6">
                 <p>Content</p>
             </div>
             <div class="col-md-3">&nbsp;</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
    }
});
};

08-17 19:57