仅隐藏移动设备上的li元素,而不是平板电脑或桌面设备

时间:2016-04-01 20:45:31

标签: jquery css twitter-bootstrap

如果页脚使用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">&#xE145;</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">&#xE145;</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">&#xE145;</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上方的移动设备,但现在问题是如何在移动时启用点击事件

2 个答案:

答案 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。