Question

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

Answer 1

所以你的目标是将它们折叠以节省移动空间？

没有一种简单的方法可以嗅到没有抓住平板电脑的“手机”，因为从技术角度来看，没有明确的手机与平板电脑的定义。想想看：有4k安卓手机和1024px宽的Android平板电脑，他们都会给你基本相同的用户代理字符串，因为他们都使用Android浏览器。您是否认为平板电脑具有一定的屏幕尺寸（英寸）？平板电脑怎么样？不要设计“手机”和“平板电脑”，而是设计屏幕尺寸。隐藏链接（如果它们不合适），如果它们显示则显示它们。无论如何，那是你的最终目标，对吗？

如果我是你，我会做什么，我会检查页面加载时的视口宽度和高度，然后如果它们小于或大于某个数字（您可以通过调整浏览器的大小来确定设计打开直到它不再适合），为所有面板调用折叠方法。因为你正在使用Jquery：

$( document ).ready(function(){
    if(window.innerWidth < someNumber){
        //do your collapsing code here
    }
})

Answer 2

如果您使用 bootstrap ，这几乎不成问题。使用visible-sm仅显示选项卡中的链接和桌面的visible-lg。

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

2 个答案: