5

Tenho um LI e gostaria que ela fosse mostrada apenas no modo mobile:

<ul style="display: block;">
 <li><a href="/">Início</a></li>
 <li class="list-cat"></li>
 <li><a href="teste">Preços</a></li>
 <li><a href="teste">Cases</a></li>
 <li><a href="teste">Sobre</a></li>
 <li><a href="teste">Contato</a></li>
 <li class="showMobile"><a href="teste">Mostrar apenas Mobile</a></li>
</ul>

Existe a possibilidade de fazer isso com JQuery? Já tenho alguns tamanhos de tela que mobiles usam no meu arquivo CSS, nos medias.

3
  • 2
    Você usa o Bootstrap ? Ele tem classes especificas para isto ...
    – DevBusy
    Commented 19/06/2017 às 13:59
  • Não uso. Fiz eu mesmo. Commented 19/06/2017 às 14:04
  • Você não pode usar as Medias queries, quer jQuery mesmo?
    – BrTkCa
    Commented 19/06/2017 às 14:06

2 Respostas 2

4

Você poderia criar um css assim:

@media (min-width: 320px) {
  .showMobile{
    display:block;
  }
}
@media (min-width:480px)  {
  .showMobile{
    display:none;
  }
}

veja funcionando no Codepen

3

Como você pediu com JQuery e não MediaQuerie, eu resolvi o problema dando um get na largura da tela e setando o display como block caso esteja dentro da largura que você considera mobile. Existem inumeras formas de fazer isso com JQuery acredito que essa seja a mais simples !

$(".showMobile").css("display", "none"); //Desabilitando

var mobileWidth = 300; //Set no tamanho que você considerar mobile

//Habilitando se estiver dentro da largura que você deseja
if ($(window).width() < mobileWidth) {
        $(".showMobile").css("display", "block")
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="display: block;">
 <li><a href="/">Início</a></li>
 <li class="list-cat"></li>
 <li><a href="teste">Preços</a></li>
 <li><a href="teste">Cases</a></li>
 <li><a href="teste">Sobre</a></li>
 <li><a href="teste">Contato</a></li>
 <li class="showMobile"><a href="teste">Mostrar apenas Mobile</a></li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .