Question

你好，感谢你阅读这篇文章。

我正在尝试实现以下内容，正如标题所示，我有一个帖子，并希望在使用JQUERY和BOOTSTRAP点击评论按钮时显示评论框（向下滑动）。

到目前为止，我有这个：（jquery和html）

jQuery(function ($) {
    $('.frenMeta span.clickable').on("click", function (e) {
        if ($(this).hasClass('panel-collapsed')) {
            // expand the panel
            $(this).parents('.panel').find('.panel-body').slideDown();
            $(this).removeClass('panel-collapsed');
        }
        else {
            // collapse the panel
            $(this).parents('.panel').find('.panel-body').slideUp();
            $(this).addClass('panel-collapsed');
        }
    });
});

    <div class="container">
      <div class="row row-centered">
        <div class="col col-sm-9 col-centered">
          <div class="panel panel-default">
             <div class="panel-heading">
                <h4 class="pull-left"><img src="http://placehold.it/20x20" class="img-circle">&nbsp;Post Title goes here</h4>
                <h5 class="pull-right">48 points · 9h</h5>
              </div>
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dolor at velit ultricies porta. Mauris vehicula in arcu eget pulvinar. Phasellus vel condimentum purus. Cras luctus nisi eu neque aliquet, eget laoreet tellus rhoncus. Donec laoreet sed...</p>
                <div class="clearfix"></div>
                <p class="text-center frenMeta" style="margin: 0px;">Rate this post <a href="#" class="rate"><span class="glyphicon glyphicon-thumbs-up"></span></a>&nbsp;&nbsp;<a class="rate" href="#"><span class="glyphicon glyphicon-thumbs-down"></span></a>&nbsp;&nbsp;·&nbsp;&nbsp;Comments <span class="badge">3</span>&nbsp;&nbsp;·&nbsp;&nbsp;<span class="btn btn-primary btn-xs btn-xs clickable">Reply <span class="glyphicon glyphicon-share-alt"></span></span>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="fren.php" class="btn btn-primary btn-xs btn-xs">Read more <span class="glyphicon glyphicon-info-sign"></span></a></p>
              </div>
           </div>
           <div class="panel panel-default panel-collapsed">
            <div class="panel-body">
                <form class="form center-block">
                  <div class="form-group">
                    <textarea class="form-control input-lg" autofocus="" placeholder="What do you want to share?"></textarea>
                  </div>
                  <button class="btn btn-primary btn-sm pull-right" data-dismiss="modal" aria-hidden="true">Post</button>
                </form>
            </div>
            </div>
        </div> 
      </div>
    </div>

http://jsfiddle.net/of4j0xfr/1/

但是现在唯一发生的事情是第一个面板是折叠而不是评论面板。

另外，关于如何在默认情况下折叠评论面板的任何想法？我试过了：“面板崩溃了”但它没有用。

感谢任何帮助。

谢谢

Answer 1

我在你试图隐藏的元素中添加了一个面板注释类，并添加了display：none;到.panel-collapsed。

jQuery(function ($) {
  $('.frenMeta span.clickable').on("click", function (e) {
    if ($('.panel-comment').hasClass('panel-collapsed')) {
        // expand the panel
        $('.panel-comment').slideDown();
        $('.panel-comment').removeClass('panel-collapsed');
    }
    else {
        // collapse the panel
        $('.panel-comment').slideUp();
        $('.panel-comment').addClass('panel-collapsed');
    }
  });
});

http://jsfiddle.net/of4j0xfr/2/

希望这就是你要找的东西。

编辑：如果您在一个页面上有多个帖子，我建议您将每个帖子放在一个包装器中，并使用该类的第一个父级来选择正确的元素。否则所有.panel-comments都将打开。

创建折叠注释区域

1 个答案: