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

Question

What about you guys, huh? Guys, I’m having a question, I have a posting system similar to facebook, and as you know, there is in the post for the user to open the settings to delete and etc, that by clicking it displays the div with the options, right, so far so good, I made the system to be able to apply the class 'block' in this div by clicking on the icon of the options... The problem is, when the user clicks on the icon, it displays, but it only disappears if they press the icon again, and I wanted it to disappear by clicking anywhere else, and like, I pressed displayed one, if I leave it open and press the setting for another post, is visible both, and I wanted it to disappear when I press anywhere else and when I press one if there is already any visible, it hides the visible and shows what the user requested, I tried to do this with Blur(), but for some reason it did not work, follows below the code. js, remembering that I am 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');
 });

Whoever knows help me please.

Answer 1

You will need to check if there is any event click out of your div after it is clicked, for this you need to add an event system in your code and limit the event to only run on elements other than your button (in the example below I limited to the button and 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>

Answer 2

When you click on the icon, just hide all the others that are being displayed before showing, if they don’t have the class block:

//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');
});

Answer 3

Personally, thanks for the strength again, you really helped me out there. And the final code was like this by @Dudaskank:

//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 with his comments here on the site for you, I removed only the fadeToggle(), because they were giving a little problem at the time of the display, because it showed instantly the div and then added the effect, so I blinked at the time it showed. But it’s there, no mistake for anyone with the same or similar case