Lock to not show another div while one is already visible to the user

Navigation
0

What about people, bllz? I have a question, I have a post system similar to facebook, and as you know, there is in the post for the user to open the settings to delete and etc, which when clicking it displays the div with the options, right, so far okay, I made the system to be able to apply the class 'block' in this div by clicking on the options icon ... The problem is, when the user clicks on the icon it displays, but it disappears only if the icon is pressed again, and I wanted him to disappear by clicking anywhere else, and like, I pressed one displayed, if I left open and pressed in the configuration of another publication, it would be visible both, and I wanted it to disappear when I pressed anywhere else and when I tried to do this with Blur (), but for some reason it did not work, it follows the code .js, remembering that I'm using JQuery: :: 

//Código Js, função para exibir a div .configsOp e também esconder...
$('.configsPost .icon').on('click', function(){
   $(this).parent().find('.configsOp').fadeToggle(200).toggleClass('block');
});

//Código que tentei usar para remover a Class Block da div.configsOp
$('.configsOp').blur(function(){
   $(this).fadeToggle(200).removeClass('block');
 });

Who knows, please help me.

    
asked by anonymous 02.07.2018 / 14:50

3 answers

0

When you click on the icon, just hide all the others that are being displayed before showing, if it does not have the block class: 

//Código Js, função para exibir a div .configsOp e também esconder...
$('.configsPost .icon').on('click', function() {
  // se o div deste ícone não estiver com classe block, remove essa classe de outros divs que podem estar ativos
  if(!$(this).parent().find('.configsOp').hasClass('block')) {
    $('.configsOp').fadeToggle(200).removeClass('block');
  }
  $(this).parent().find('.configsOp').fadeToggle(200).toggleClass('block');
});
    
02.07.2018 / 18:18
0

You will need to check if there is any click event outside your div after it is clicked, so you need to add an event listener in your code and limit the event to only run on elements other than your button ( in the example below I limited the button and the links) 

function ocultar(event) {
  if (!$(event.target).parents('.configsPost.icon').length) {
    $('.configsOp').removeClass("block");
  }
}
document.addEventListener("click", ocultar);
$('.configsPost.icon').on('click', function mostrar() {

  $('.configsOp').addClass("block");

});
.configsOp {
  background-color: #ccc;
  width: 200px;
  height: 0;
  overflow: hidden;
}

a {
  display: block;
}

.block {
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='configsPost icon'>
  <button>Clique para opções</button>
  <div class='configsOp'>
    <a href='#'>opcão 1</a>
    <a href='#'>opção 2</a>
    <div>
    </div>
    
02.07.2018 / 16:28
0

Personaal, thanks for the force again, have helped me a lot even in this. And the final code looked like that of @Daskaskank: 

//Código Js, função para exibir a div .configsOp e também esconder...
$('.configsPost .icon').on('click', function() {
  // se o div deste ícone não estiver com classe block, remove essa classe de outros divs que podem estar ativos
  if(!$(this).parent().find('.configsOp').hasClass('block')) {
    $('.configsOp').removeClass('block');
  }
  $(this).parent().find('.configsOp').toggleClass('block');
});

I left his comments here on the site for you, I just removed the fadeToggle (), because they were giving a little problem at the time of the display, because it instantly showed the div and then added the effect, then winked hour that showed. But there it is, with no error for anyone with the same or similar case

    
03.07.2018 / 13:33
Catch only the values that are different in the query Bug on the menu