使用 JavaScript 和 Bootstrap 显示和隐藏 1 行元素
Show and Hide 1 row of elements with JavaScript and Bootstrap
我正在制作一个新网站。正如我正在做的那样,通过单击显示一个视频库以模式显示视频,总共只显示 1 个带文本的大视频和下面的 3 个小视频,您可以在其中显示更多项目。我需要你点击 show me more out a new row with 3 computer elements by al-md-4 columns。这一步我已经完成了,但是我有两个问题:
默认 Javascript 显示 2 行而不是一行,将在 JS 1 中定义并显示 2
我也希望有另一个按钮 "hide" 并且在我单击一行时隐藏起来。
然后我把完整的代码附在我能做的地方。
http://www.bootply.com/vLeA1VQoYF
需要帮助!!
太感谢了!来自西班牙的问候
这是我的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;
}));
如果我误解了你,请告诉我,你还需要其他东西。
我正在制作一个新网站。正如我正在做的那样,通过单击显示一个视频库以模式显示视频,总共只显示 1 个带文本的大视频和下面的 3 个小视频,您可以在其中显示更多项目。我需要你点击 show me more out a new row with 3 computer elements by al-md-4 columns。这一步我已经完成了,但是我有两个问题:
默认 Javascript 显示 2 行而不是一行,将在 JS 1 中定义并显示 2
我也希望有另一个按钮 "hide" 并且在我单击一行时隐藏起来。
然后我把完整的代码附在我能做的地方。
http://www.bootply.com/vLeA1VQoYF
需要帮助!! 太感谢了!来自西班牙的问候
这是我的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;
}));
如果我误解了你,请告诉我,你还需要其他东西。