Question

有点难以解释，但是我有这些行，大约有22行，当我点击一行时，内容面板部分应该向下滑动并显示它，然后当我点击该行时再次，它应该隐藏它。目前点击显示作品，但如果我点击向下滑动的内容面板，它会向上滑动，

我只想要它，所以如果我再次单击该行，它会向上滑动，如果我单击滑动的内容，则不会发生任何事情，以便人们可以单击链接和其中的内容，而不会关闭。

以下是我的一些代码。 JQUERY：

var main = function() {

$(".article").click(function() {
    $('.article').removeClass('current');
       $(this).addClass('current');
       $(this).children('.description').slideToggle();
}); 
};

$(document).ready(main);

这是HTML，只有1行，22：

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

我认为这是问题的唯一相关代码：

Answer 1

你可以使用这样的东西

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

Answer 2

我会重新考虑你的html因此它有一个像句柄一样的按钮。

HTML

<article>
<span>Show/Hide</span>
<div class="dropdown" style="display:none;">
    // content to display on toggle
</div>
</article>

JS / JQUERY

$('article span')on('click', function(){ $('.dropdown').slideToggle('fast'); };

JQuery Slidetoggle（）工作但不是我需要它

2 个答案: