Event conflict with jquery

Asked

Viewed 202 times

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 you to click out of #barra-busca, the same closes and gives space to the other elements that will be shown, however, it occurs that when clicking outside it, nothing happens, and when clicking on it, or on the elements inside it, it executes the action of hiding and showing the other elements.

How can I correct ?

FIDDLE

https://jsfiddle.net/g0am9rvs/

WEBSITE LINK

http://narglothstore.16mb.com/peregrino-web/

jquery function menu events
  • 1

    You can create a Fiddle to make it easier to play?

2 answers

2


To perform this type of change follow the following code: The aleracoes I realized was rather to use css, I used the show or ID function of jquery and click out 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>

  • keeps disappearing by clicking on it, and sometimes the bar doesn’t even appear

  • You say with respect to clicking on the search input ?

  • that’s right :) and when I click to open the input, it also does not open

  • One look I changed the code

  • still, when clicking on the bar it goes :/ I decided to put an icon to close, but its answer was the most complete, it solved at least the problem of clicking to show and not show

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>

  • It keeps hiding the search bar by clicking on it

  • 1

    Sure, bro? Not here.

  • I put his link running on a server, for now does not have a responsive it, runs better at 1920px

Browser other questions tagged jquery function menu events

You are not signed in. Login or sign up in order to post.