jQuery - afficher/masquer la zone de recherche

J'ai écrit un peu de jQuery pour ouvrez une boîte de recherche lorsqu'un div est cliqué. En gros, sur cliquez dessus montre une div qui est d'abord caché & intérieur de ce div est un champ de recherche et un bouton de fermeture. C'est tous fonctionne bien. Ce n'est pas de travail, c'est toutefois le bouton fermer. Mes suppositions sont que le bouton de fermeture n'est pas cacher que la div, car il est lui-même à l'intérieur de la div. Voici ce que j'ai et voici un jsfiddle.

HTML

<ul class="tert-nav">
    <li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li>
    <li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li>
    <li class="searchit">
        <img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" />
        <div class="searchbox">
            <img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" />
            <input placeholder="search..." type="text" />
            <input type="submit" value="" />
        </div>
    </li>
</ul>

jQuery

$(document).ready(function() {

//Search
$('ul.tert-nav li.searchit').click(function() {
    $(this).addClass('search');
    $('.searchbox').fadeIn();
    $('ul.tert-nav li img.searchicon').hide();
});

$('ul.tert-nav li.searchit img.closesearch').click(function() {
    $('.searchbox').hide();
    $('ul.tert-nav li').removeClass('search');
});

})

CSS

ul.tert-nav {
float: right;
position: absolute;
margin: 0;
padding: 0;
right: 0;
top: 0;
list-style: none;
}
ul.tert-nav li {
float: right;
width: 26px;
height: 28px;
background: #3c3c3c;
text-align: center;
margin-left: 2px;
cursor: pointer;
transition: all .2s ease;
-o-transition: all .2s ease;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
}
ul.tert-nav li:hover {
background: #000;
}
ul.tert-nav .search {
width: 246px;
text-align: left;
cursor: default;
}
ul.tert-nav .search:hover {
background: #3c3c3c;
}
ul.tert-nav .searchbox {
display: none;
width: 100%;
}
ul.tert-nav .searchbox .closesearch {
float: left;
margin: 6px 4px 0px 4px;
cursor: pointer;
}
ul.tert-nav .searchbox .closesearch:hover {
opacity: 0.8;   
}
ul.tert-nav .searchbox input[type=text] {
float: left;
width: 184px;
height: 24px;
padding: 0px 0px 0px 10px;
margin: 2px 0px 0px 0px;
border: none;
background: url(images/search-bg.png) no-repeat;
outline: none;
}
ul.tert-nav .searchbox input[type=submit] {
float: left;
width: 26px;
height: 24px;
margin: 2px 0px 0px 0px;
padding: 0px;
border: none;
background: url(images/search-btn.png) no-repeat;
outline: none;
cursor: pointer;
}

Aussi, voici un exemple d'image de l'état initial et l'cliqué/état ouvert pour donner une idée visuelle de ce que je suis en train de faire. Merci!

jQuery - afficher/masquer la zone de recherche

OriginalL'auteur Trevan Hetzel | 2013-02-05

  1. 8

    Parce que le bouton de fermeture est à l'intérieur de la .searchit boîte, le premier gestionnaire est également tiré juste après. Arrêter la propagation de l'événement de clic lors de la clôture de gestionnaire et cela devrait fonctionner:

    $('ul.tert-nav li.searchit img.closesearch').click(function(e) {
e.stopPropagation();
$('.searchbox').hide();
$('ul.tert-nav li').removeClass('search');
});
    +1 pour le court et doux de la prévention de la propagation.
    Parfait! Sens & j'ai même essayé d'arrêter la propagation, mais je pense que j'ai juste ne pas en ajouter un (e) 🙂

    OriginalL'auteur freejosh

  2. 3

    Alternative à stopPropagation() est pour laisser la div le faire si c'était le div qui a été cliqué.

    Cela peut être très pratique si vous avez beaucoup d'éléments à l'intérieur de la contrôler avec leurs propres événements click et vous ne voulez pas mettre à jour ou si vous avez besoin de laisser l'événement click se propager, mais veulent toujours être en mesure de distinguer au sein de certains événements click le long du chemin.

    Bien que, dans votre situation, stopPropagation() sera plus facile bien sûr.

    $('ul.tert-nav li.searchit').click(function (event) {
//Did the click originate from this?
if(event.target !== this){
//No, it wasn't. So we do nothing.
return;
}
$(this).addClass('search');
$('.searchbox').fadeIn();
$('ul.tert-nav li img.searchicon').hide();
});

    DÉMO - Valider la source de l'événement click

    OriginalL'auteur Nope