4

inserir a descrição da imagem aqui
Como é possivel desmarcar um checkbox caso eu clique em outro campo do site?

O checkbox serve para que quando o estado seja de 'checked', ele 'arraste' meu menu de -65% para 0 e apareça na tela, sendo utilizado em um layout mobile responsivo.

Infelizmente não tenho noção como isso pode ser feito, mas acredito que seja em javascript/jquery.

Ex:

<header id="menuCelular">
<input type="checkbox" id="btn-menu">
<label id="barra-icon-menu" for="btn-menu"><label id="txt-menu" for="btn-menu">Menu</label></label>

<nav class="menuMobile">
<ul class="menu">

      <li id="mapa-menu" class="abre-dropdown"><a href="\\">Mapa do site</a>
        <ul class="submenu-1">
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
        </ul>
    </li>    
   <li class="abre-dropdown"><a href="\\">>Aprendizado</a>
        <ul class="submenu-1">
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
        </ul>
    </li>
    <li class="textos-menu"><a href="\\" title="\\">Textos</a></li>    
    <li class="fotos-menu"><a href="\\" title="\\"></label>Fotos</a></li> 

</ul>
</nav>
</header>

Agora, quando o menu está aberto, se eu clicar barra #menuCelular ele não fecha, a não ser que eu aperte fora da região do .menuMobile

SITE (Redimensione o viewport para 479px)

6
  • Tentou o método $.blur da jquery, acho que adicionando ele no checkbox e atribuindo uma função funcione Commented 29/12/2015 às 17:52
  • Pode dar um exemplo? Nunca utilizei do método.
    – Cobra
    Commented 29/12/2015 às 17:54
  • Provavelmente o checkbox não é a melhor solução neste caso. Seria melhor algo relacionado ao foco, ou mesmo links para fragmento ( # ) + css.
    – Largato
    Commented 29/12/2015 às 18:04
  • Sim, eu imaginei. Acontece que foi o primeiro menu responsivo que eu fiz, então fiquei meio confuso em relação a tudo isso, é novo pra mim. Irei editar e deixar o site para que deem uma olhada. Caso acessem, redimensionem o navegador para ver a versão mobile (479px).
    – Cobra
    Commented 29/12/2015 às 18:07
  • @ThiagoBarros o checkbox escondido é bem interessante para coisas com comportamento toggle (liga / desliga), mas é que justo no seu caso, seria mais relacionado ao foco mesmo. Mas é bom saber usar css + check, dá pra fazer umas coisas mais complexas.
    – Largato
    Commented 29/12/2015 às 18:12

3 Respostas 3

6

Bem caso deseje mesmo utilizar o checkBox, você pode fazer assim:

var checkbox = $('#button-menu');

$('body').not('#menu').click(function() {
  checkbox.prop("checked", false);
});

$('#button-menu, #menu').click(function(event) {
  event.stopPropagation();

});
#geral {
  width: 200px;
  height: 200px;
  background: #333;
}

#menu {
  width: 200px;
  height: 100px;
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

Usei o .stopPropagation(). Basicamente, ao clicar em qualquer lugar no body você irá fazer com que o checkbox seja desmarcado, contudo, caso clique ou no checkbox ou na div#menu a propagação do evento que faz a desmarcação deixará de acontecer, assim poderá haver a marcação.

Esse método é bem poderoso então tenha cuidado ao aplicá-lo. Veja aqui - https://css-tricks.com/dangers-stopping-event-propagation/.

8
  • 1
    Funcionou perfeitamente. Porém, agora ocorreu outro problema: Quando eu clico na barra para fechar o menu ela não funciona mais, e o menu só se fecha caso eu clique fora da região.
    – Cobra
    Commented 29/12/2015 às 18:47
  • Não sei se fui claro, caso necessite, eu posso explicar de outra forma @Samir
    – Cobra
    Commented 29/12/2015 às 19:00
  • Você possui uma função isolada para fechar o menu? Caso possua tente aplicá-la após o .stopPropagation(). Commented 29/12/2015 às 19:01
  • Não, ele funciona junto com o checkbox: quando 'checked' o menu desliza de -65% pra 0 (o menu fica escondido no canto da tela), e quando desmarcado ele volta pra -65%.
    – Cobra
    Commented 29/12/2015 às 19:04
  • Você pode me mostrar essa parte do seu código, acho que sei qual o problema. Commented 29/12/2015 às 19:06
2

Utilizando a resposta e o link oferecido por @SamirBraga, segue abaixo código sem utilizar o event.stopPropagation();

var checkbox = $('#button-menu');

$(document).on('click', function(event) {
  if (!$(event.target).closest('#button-menu, #menu').length) {
    checkbox.prop("checked", false);
  }
});
#geral {
  width: 200px;
  height: 200px;
  background: #333;
}

#menu {
  width: 200px;
  height: 100px;
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

O exemplo foi retirado do próprio link sobre os perigos de se utilizar o stopPropagation, que segundo o mesmo deve ser utilizado apenas quando se deseja realmente cancelar um evento da arvore DOM, como por exemplo a submissão de um formulário.

Stopping propagation should be thought of like canceling an event, and it should only be used with that intent. Perhaps you want to prevent a form submission or disallow focus to an area of the page. In these cases you're stopping propagation because you don't want an event to happen, not because you have an unwanted event handler registered higher up in the DOM.

1
  • 1
    Perfeito! obrigado, espero que ajude outras pessoas.
    – Cobra
    Commented 29/12/2015 às 20:10
1

Tenta assim:

$("#geral").not("#menu, #barra-icon-menu").click(function(){
    $("#button-menu").prop("checked", false);
    $("#barra-icon-menu").click();
});
4
  • Eu testei e continuo da mesma forma. Toda aquela barra azul da imagem abre o menu, pois é um label com o for direcionado para o checkbox, e quando pressionado altera as propriedades css e arrasta o menu para a tela.
    – Cobra
    Commented 29/12/2015 às 18:06
  • Essa barra azul tem id classe? se tiver me passe que melhoro minha resposta e tentamos outra coisa Commented 29/12/2015 às 18:16
  • Irei estar passando a estrutura na pergunta, tudo bem? Obrigado.
    – Cobra
    Commented 29/12/2015 às 18:17
  • Obrigado pela ajuda!
    – Cobra
    Commented 29/12/2015 às 18:47

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 .