Question

这可能看起来有点像，但我真的可以使用一些帮助。

我有这段代码：

<div id="navigation">
<ul class='top-nav'>
 <li id='pg911555508204622392'><a href="/" data-membership-required="0" >Home</a></li>
 <li id="active"><a href="/about.html">About</a></li>
 <li id='pg198396790797236835'><a href="/contact.html" data-membership-required="0" >Contact</a></li>
 <li class="signup"><a href="/signup.html" data-membership-required="0" >Signup</a></li>
 </ul>
<div style="clear:both;"></div>
</div>

我需要一个可以使用的代码（可能是jquery），这样当屏幕大小调整为760px时，每个带有ID的列表项都会被隐藏，只留下带有CLASS的列表项。通常，使用“媒体查询”在css中隐藏ID会更容易，但由于页面（lis）将由不同的用户和随机分配的页面ID创建，我无法假设隐藏哪个。

我只想隐藏任何已分配ID的列表项，并显示任何带CLASS的列表项。我猜这可以用jquery完成吗？

这是一个jsfiddle链接：http://jsfiddle.net/Delinx/73kq3cup/

任何帮助将不胜感激。

提前致谢。

Answer 1

您可以使用：

$(window).on('resize', function(){
  var win = $(this); //this = window
  if (win.height() == 760) { 
      $('#navigation li[id]').hide(); 
      $('#navigation li[class]').show(); 
  }
});

Answer 2

您可以使用attribute selector在li中选择ID或CLASS es的所有jQuery元素：

$('li[id]').hide();
$('li[class]').show()

...或在CSS

中

li[class] {
    display: block;
}

li[id] {
    display: none;
}

Answer 3

试试这个：

$(window).on('resize', function () {
    if ($(this).width() < 760) {
        $('li[id]').hide();
    } else {
        $('li:hidden').show();
    }
}).resize();

Fiddle

jQuery中有一些属性选择器，所以在你的情况下你只想隐藏那些具有<li>属性的id元素，所以你应该这样做$('li[id]')及其只读。

Answer 4

css only solution

CSS [attribute~=value] Selector

Demo

HTML

<div id="1111">id only</div>
<div class="sdfsdfs">class only</div>
<div id="rrrrr1">id only</div>
<div class="sdfsdfs">class only</div>
<div id="sfvsv" class="sdfsdfs">class and id</div>

CSS

@media (max-width: 760px) {
    div[id] {
        display:none;
    }
}

仅隐藏具有ID的列表项的代码

4 个答案:

Fiddle