只在移动设备上隐藏li元素，不在平板电脑或桌面上

如果脚本使用引导程序和jquery仅在移动设备上隐藏li列表，我需要能够在平板电脑/台式机上查看链接。有了这种变化，这些链接就隐藏在手机，平板电脑和桌面上。将display:none属性设置为visible可在chrome开发工具中使用，但不确定将平板电脑和桌面作为目标的最佳方式。只在移动设备上隐藏li元素，不在平板电脑或桌面上

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和UPDAT已更新ED JS TO DISABLE data-toggle上面的移动设备，但现在的问题是如何启用移动时的点击事件

来源

2016-04-01 user3438917

您可以对此使用媒体查询。有关如何使用它们的详细说明，请参阅[Mozilla开发者网络]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）。 – Roy

这不就是类“hidden-xs”在bootstrap中的作用吗？ – DaveK

我已经尝试了两种媒体查询，并且使用'hidden-xs'，但没有运气。 – user3438917

因此，您的目标是折叠它们以节省移动空间？

从技术的角度来看，没有简单的方法来嗅探“平板电脑”，因为从技术角度而言，手机和平板电脑没有明确的定义。想想看：有4k的Android手机和1024px宽的Android平板电脑，它们都会给你基本相同的用户代理字符串，因为它们都使用Android浏览器。你认为平板电脑的屏幕尺寸是多少英寸？平板车怎么样？不要在设计时考虑“手机”和“平板电脑”，而应设计屏幕尺寸。如果链接不合适，请隐藏链接，如果链接显示链接。无论如何，这是你的最终目标，对吧？

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

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

来源

2016-04-01 20:54:25

它与节省空间无关。这就是页面设计所要求的。这些div必须能够在手机上切换，就像您在小提琴中看到的一样。 – user3438917

如果您正在使用引导这是很难的一个问题。使用visible-sm仅为桌面显示tab和visible-lg中的链接。

来源

2016-04-02 11:15:44

只在移动设备上隐藏li元素，不在平板电脑或桌面上

回答

相关问题