jQuery - hiển thị/ẩn hộp tìm kiếm

Question

Tôi đã viết một jQuery nhỏ để trượt mở một hộp tìm kiếm khi một div được nhấp. Về cơ bản, khi nhấp vào nó cho thấy một div ban đầu bị ẩn & bên trong div đó là một hộp tìm kiếm và một nút đóng. Đó là tất cả làm việc tốt. Những gì không làm việc tuy nhiên là nút đóng. Tôi đoán là nút đóng không che giấu div đó bởi vì chính nó nằm bên trong div. Đây là những gì tôi có và đây là một số 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; 
} 

Ngoài ra, đây là một hình ảnh ví dụ về Initia l trạng thái và trạng thái đã mở/được mở để đưa ra ý tưởng trực quan về những gì tôi đang cố gắng làm. Cảm ơn!

Answer 1

Bởi vì vào nút đóng ở bên trong .searchit hộp, xử lý đầu tiên được cũng bị sa thải ngay sau đó. Dừng công tác tuyên truyền về sự kiện nhấp chuột trong xử lý chặt chẽ và cần làm việc:

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

Answer 2

Thay thế cho stopPropagation() là để chỉ cho phép các div làm điều đó là điều nếu đó là div được nhấp vào. Điều này có thể rất tiện dụng nếu bạn có nhiều yếu tố bên trong kiểm soát với các sự kiện nhấp của riêng mình và bạn không muốn cập nhật tất cả hoặc nếu bạn cần để sự kiện nhấp chuột được truyền nhưng vẫn muốn trở thành có thể phân biệt trong một số sự kiện nhấp chuột trên đường đi.

Mặc dù trong trường hợp cụ thể của bạn, stopPropagation() sẽ dễ dàng hơn trong khóa học.

$('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 - Xác nhận nguồn gốc của sự kiện click

---