如果页脚使用bootstrap和jquery仅在移动设备上隐藏li列表,我需要能够在平板电脑/桌面上查看链接。通过此电流变化,链接隐藏在移动设备,平板电脑和桌面设备上。将display:none
属性设置为visible
适用于chrome dev工具,但不确定以平板电脑和桌面为目标的最佳方式。
HTML
<div class="row">
<div class="col-lg-12">
<div class="footer-links">
<div class="row">
<div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about">
<h4 class="panel-title">
<a class="accordion-toggle">
<i class="material-icons"></i>
Link Head
</a>
</h4>
<ul class="visible-sm visible-md visible-lg collapse" id="about">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why">
<h4 class="panel-title">
<a class="accordion-toggle">
<i class="material-icons"></i>
Link Head
</a>
</h4>
<ul class="visible-sm visible-md visible-lg collapse" id="why">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks">
<h4 class="panel-title">
<a class="accordion-toggle">
<i class="material-icons"></i>
Link Head
</a>
</h4>
<ul class="visible-sm visible-md visible-lg collapse" id="quicklinks">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-8">
<h4 class="deal-text"><strong>A bit of ad text</strong>will go here</h4>
</div>
<div class="col-md-3 col-sm-4">
<div class="footer-share">
<a href=""><img src="/img/facebook_icon.png"></a>
<a href=""><img src="/img/twitter_icon.png"></a>
<a href=""><img src="/img/linkedin_icon.png"></a>
<a href=""><img src="/img/youtube_icon.png"></a>
<a href=""><img src="/img/google_icon.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
的jQuery
$('[data-toggle="collapse"]').click(function(e){
if ($(window).width() >= '480') {
e.stopPropagation();
}
else if($(window).width() <= '480'){
$('.panel').on('click',function(){$('.collapse').collapse('hide');})
}
});
更新的JSFIDDLE:https://jsfiddle.net/mxv9yq4m/10/
更新visible-sm visible-md visible-lg
及更新JS以禁用data-toggle
上方的移动设备,但现在问题是如何在移动时启用点击事件
答案 0 :(得分:0)
所以你的目标是将它们折叠以节省移动空间?
没有一种简单的方法可以嗅到没有抓住平板电脑的“手机”,因为从技术角度来看,没有明确的手机与平板电脑的定义。想想看:有4k安卓手机和1024px宽的Android平板电脑,他们都会给你基本相同的用户代理字符串,因为他们都使用Android浏览器。您是否认为平板电脑具有一定的屏幕尺寸(英寸)?平板电脑怎么样?不要设计“手机”和“平板电脑”,而是设计屏幕尺寸。隐藏链接(如果它们不合适),如果它们显示则显示它们。无论如何,那是你的最终目标,对吗?
如果我是你,我会做什么,我会检查页面加载时的视口宽度和高度,然后如果它们小于或大于某个数字(您可以通过调整浏览器的大小来确定设计打开直到它不再适合),为所有面板调用折叠方法。因为你正在使用Jquery:
$( document ).ready(function(){
if(window.innerWidth < someNumber){
//do your collapsing code here
}
})
答案 1 :(得分:0)
如果您使用 bootstrap ,这几乎不成问题。 使用visible-sm仅显示选项卡中的链接和桌面的visible-lg。