jQuery - pokaż/ukryj pole wyszukiwania

Question

Napisałem mały jQuery, aby otworzyć okno wyszukiwania po kliknięciu elementu div. Zasadniczo, po kliknięciu pokazuje div, który jest początkowo ukryty & wewnątrz tego div jest pole wyszukiwania i przycisk zamykania. Wszystko działa dobrze. Jednak nie działa przycisk zamykania. Domyślam się, że przycisk zamknięcia nie ukrywa tego elementu div, ponieważ sam znajduje się wewnątrz elementu div. Oto, co mam i tutaj jest 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; 
} 

Również tutaj mamy przykład obraz Inicjatyw l stan i stan "kliknięty/otwarty", aby dać obraz tego, co próbuję zrobić. Dzięki!

Answer 1

Ponieważ blisko przycisk jest wewnątrz skrzynki .searchit pierwsza obsługi jest również tuż po wyrzuceniu. Powstrzymać rozprzestrzenianie zdarzenia click podczas ścisłej obsługi i powinno działać:

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

Answer 2

Alternatywa stopPropagation() jest tylko niech div zrobić to, gdyby to była div który został kliknięty.

Może to być bardzo przydatne, jeśli masz wiele elementów wewnątrz formantu z własnymi zdarzeniami kliknięcia i nie chcesz ich aktualizować ani nie chcesz, aby zdarzenie click propagowało, ale nadal chcesz być w stanie rozróżnić w ramach niektórych zdarzeń kliknięcia po drodze.

Chociaż w Twojej konkretnej sytuacji stopPropagation() będzie łatwiejsze z kursu.

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

---

DEMO - Weryfikacja źródło zdarzenia click

---