Skip to main content
adicionou 46 caracteres ao conteúdo
Fonte Link
Leonardo Bonetti
  • 5,5mil
  • 6
  • 26
  • 57

EuComo 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>

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>

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>

Fonte Link
Leonardo Bonetti
  • 5,5mil
  • 6
  • 26
  • 57

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>