Conflict on events with jquery

Navigation
1

I have the following code: 

$('#abre-busca').click(function(event){
    event.preventDefault();
    $('#menu-principal-sub li').css({'opacity':0});
    setTimeout(function(){
        $('#menu-principal-sub li').css({'display':'none'});
        $('#menu-principal-sub form').css({'display':'inline-block'});
        setTimeout(function(){
            $('#menu-principal-sub form').css({'opacity':1});
        },100);
    },500);
});
$(document).click(function(event){

    if($(event.target) != $('#barra-busca')){
        $('#menu-principal-sub form').css({'opacity':0});
        setTimeout(function(){
            $('#menu-principal-sub form').css({'display':'none'});
            $('#menu-principal-sub li').css({'display':'inline-block'});
            setTimeout(function(){
                $('#menu-principal-sub li').css({'opacity':1});
            },100);
        },500); 
    }else{
    }
});

I want to click away from #barra-busca , close it and give space to the other elements that will be shown, however, it happens that clicking outside of it, nothing happens, and clicking on it, or elements inside it , it performs the action of hiding and showing the other elements.

How can I fix it?

FIDDLE

link

Site LINK

link

    
asked by anonymous 24.01.2017 / 16:32

2 answers

2

To make this kind of change follow the following code: The alerts I performed were instead of using css, I used the show or hide function of jquery and in the click away I validated by typeof.

Follow the code below: 

$('#abre-busca').click(function(event){
	event.preventDefault();
	$('#menu-principal-sub li').css({'opacity':0});
	setTimeout(function(){
		$('#menu-principal-sub li').hide();
		$('#menu-principal-sub form').show();
		setTimeout(function(){
			$('#menu-principal-sub form').css({'opacity':1});
		},100);
	},500);
});
$(document).click(function(event){

	if(typeof $(event.target).attr("id") == "undefined"){
		$('#menu-principal-sub form').css({'opacity':0});
		setTimeout(function(){
			$('#menu-principal-sub form').hide();
			$('#menu-principal-sub li').show();
			setTimeout(function(){
				$('#menu-principal-sub li').css({'opacity':1});
			},100);
		},500);	
	}else{
	}
});
.container-inf{position:relative;background-color:inherit;}
.container-inf .container{padding-top:15px;padding-bottom:15px;position:relative;}
.container-inf #menu-principal-sub li{display:inline-block;opacity:1;transition:opacity .5s ease-in-out;}
.container-inf .navbar-nav li a:hover{color:#7b7b7b!important;}
.navbar-nav li .active{color:#0689bd!important;}
.search-form{position:absolute;right:2.5%;top:50%;width:30%;transform:translateY(-50%);opacity:0;transition:opacity .5s ease-in-out;display:none;box-sizing:border-box;padding:7px;}
.search-form fieldset{position:relative;width:100%;}
.search-form input{width:90%;padding:8px;box-sizing:border-box;border:none;}
.search-form button{position:absolute;top:0;right:0;width:8%;height:100%;background-color:rgba(0,0,0,0);border:none;color:#FFFFFF;font-size:1.2em;}
<div id="total">


<ul id="menu-principal-sub">
	<li><a href="#">Quem somos</a></li>
	<li><a href="#">Como participar</a></li>
  <li><a href="" id="abre-busca">Busca</a></li>
	<form class="search-form" action="" method="" id="barra-busca">
		<fieldset>
			<input type="text" id="txtBusca" name="txtBusca" placeholder="Digite aqui a sua busca">
			<button type="submit"><span class="fa fa-search"></span></button>
		</fieldset>
	</form>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
28.01.2017 / 14:11
1

$('#abre-busca').click(function(event) {
  $('#menu-principal-sub form').addClass('active');
  return false;
});

$(document).on('click', function(e) {
  var elClick = $(e.target);
  var elParent = elClick.closest('ul');

  if (!elParent.hasClass('menu-principal-sub')) {
    $('#menu-principal-sub form').removeClass('active');
  }
});
.container-inf {
  position: relative;
  background-color: inherit;
}
.container-inf .container {
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}
.container-inf #menu-principal-sub li {
  display: inline-block;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.container-inf .navbar-nav li a:hover {
  color: #7b7b7b!important;
}
.navbar-nav li .active {
  color: #0689bd!important;
}
.search-form {
  position: absolute;
  right: 2.5%;
  top: 50%;
  width: 30%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .5s ease-in-out;
  box-sizing: border-box;
  padding: 7px;
}
.search-form.active {
  opacity: 1;
  transform: translateY(0%);
}
.search-form fieldset {
  position: relative;
  width: 100%;
}
.search-form input {
  width: 90%;
  padding: 8px;
  box-sizing: border-box;
  border: none;
}
.search-form button {
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: #FFFFFF;
  font-size: 1.2em;
}
<ul id="menu-principal-sub" class="menu-principal-sub">
  <li><a href="#">Quem somos</a>
  </li>
  <li><a href="#">Como participar</a>
  </li>
  <li><a href="" id="abre-busca">Busca</a>
  </li>
  <form class="search-form" action="" method="" id="barra-busca">
    <fieldset>
      <input type="text" name="" placeholder="Digite aqui a sua busca">
      <button type="submit"><span class="fa fa-search"></span>
      </button>
    </fieldset>
  </form>
</ul>
<br>
<br>
<br>dasdasdsadas
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
24.01.2017 / 17:32
Variable storage in PHP - $ _SETION x $ _GET [closed] How to get results inside the loop and grouping in a variable outside of it