0

Fiz um botão que esconde e mostra o meu select e eu queria fazer com que se eu entra-se no site em mobile começava com os selects escondidos e só depois de clicar e que os mostrava.

HTML:

<button id="filtroselects">
  <img src="/imagens/iconbgr.png" height="40px" width="40px"> Filtros
</button>

<div id="escolha">
<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

    <br/>
    <br/>

    <div class="botesdefiltrar">
        <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
        <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
  </div>   
  </div>

Meu script:

function myFunction(x) {
  if (x.matches) {
    
    $(document).ready(function(){
  $("#filtroselects").click(function(){
    $("#escolha").toggle();
  });
});
}}

var x = window.matchMedia("(max-width: 767px)")
myFunction(x)
x.addListener(myFunction)

Bbs: Estou a usar AJAX.

2
  • 1
    você já tentou adicionar style="display:none;" na div principal do seu filtro?
    – Lucas
    Commented 20/05/2019 às 13:27
  • Esquece erro meu enganei-me ja consegui graças a voce!
    – David Mv
    Commented 20/05/2019 às 13:58

1 Resposta 1

1

Coloque no seu CSS a propriedade para esconder a div:

#escolha{
   display: none;
}

O seu JavaScript está mal construído. Não se coloca $(document).ready dentro de uma função.

O que você deveria fazer é verificar a largura da tela e disparar o evento click na div se a largura da tela for maior que 767 pixels, desta forma:

<script>
$(document).ready(function(){

   $("#filtroselects").click(function(){
      $("#escolha").toggle();
   });

   if(window.innerWidth > 767){
      $("#filtroselects").click();
   }
});
</script>

Desta forma, se a página for aberta em resolução menor do que 768 pixels de largura, a div permanecerá oculta até que o botão seja clicado, e se for maior, irá aparecer.

7
  • Eu tentei alterar o meu código mas parece que se usar esse codigo o botão fica funcionando mesmo em tela de computador e o select começa escondido... E eu so botei a #escolha { display: none; } dentro do @media screen que está no css para telemoveis.
    – David Mv
    Commented 20/05/2019 às 14:09
  • Mas vc está se baseando em resolução de tela e não se o dispositivo é móvel ou não.
    – Sam
    Commented 20/05/2019 às 14:20
  • Não use @media screen, senão não irá funcionar corretamente. Faça como coloquei na resposta que dará certo.
    – Sam
    Commented 20/05/2019 às 15:51
  • E depois o que faço com o resto do css que tenho dentro do @media screen?
    – David Mv
    Commented 20/05/2019 às 15:55
  • 1
    Se vc usa @media screen para outras coisas deixe como está. Neste caso em específico, o #escolha{ display: none; } deve ficar fora do @media screen.
    – Sam
    Commented 20/05/2019 às 15:56

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 .