javascript - 使用 JavaScript 和 Bootstrap 显示和隐藏 1 行元素

Question

我正在制作一个新网站。正如我正在做的那样，通过单击显示一个视频库以模式显示一个视频，总共只显示 1 个带文本的大视频和下面的 3 个小视频，您可以在其中显示更多项目。我需要你点击 show me more out a new row with 3 computer elements by al-md-4 columns。这一步我已经完成了，但是我有 2 个问题:

• Javascript 默认显示 2 行而不是一行，将在 JS 1 中定义并显示 2

• 我还希望有另一个“隐藏”按钮，每当我点击一行时它就会隐藏。

然后我把完整的代码附在了我能做的地方。

http://www.bootply.com/vLeA1VQoYF

需要帮助!! 太感谢了!来自西类牙的问候

Answer 1

这是我的 fiddle

和 JS:

    $('.mydata:gt(0)').hide().last().after(
    $('<a />').attr('href','#').attr('id','btn_less').text('Show less').click(function(){
        var a = this;
        $('.mydata:visible:gt(0)').last().fadeOut(function(){
          if ($('.mydata:visible:gt(0)').length == 0) {
            $(a).hide();
          } else if($("#btn_more:not(:visible)")){
            $("#btn_more").show();
          }   
        });
        return false;
    })
).after($('<span />').text(' ')
).after(
    $('<a />').attr('href','#').attr('id','btn_more').text('Show more').click(function(){
    var a = this;
    $('.mydata:not(:visible):lt(1)').fadeIn(function(){
      if ($('.mydata:not(:visible)').length == 0) {
        $(a).hide(); 
      } else if($("#btn_less:not(:visible)")){
        $("#btn_less").show();
      }
    }); return false;
}));

如果我误解了你，请告诉我，你还需要其他东西。