jQuery - 顯示/隱藏搜索框

我寫了一個小jQuery來滑動打開一個搜索框，當一個div被點擊。基本上，點擊它顯示一個div，最初隱藏在裏面的那個div是一個搜索框和一個關閉按鈕。這一切工作正常。然而，沒有工作的是關閉按鈕。我的猜測是關閉按鈕沒有隱藏該div，因爲它本身在div內。這裏是我得到的，這裏是一個jsfiddle。jQuery - 顯示/隱藏搜索框

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; 
}

而且，這裏的初始的示例圖像l狀態以及點擊/打開狀態來給出我想要做的事情的視覺概念。謝謝！

enter image description here

來源

2013-02-05 Trevan Hetzel

因爲關閉按鈕是.searchit盒子裏面，第一個處理程序也被之後解僱。停止點擊事件的傳播密切處理器中，它應該工作：

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

來源

2013-02-05 20:45:54 freejosh

+1短期和甜預防傳播的源頭。 – Nope

完美！有道理，我甚至試圖阻止傳播，但我想我只是沒有添加（e）:) –

替代stopPropagation()是隻讓div做的事情，如果它是被點擊了div。

如果您在控件中有很多元素有自己的點擊事件，並且您不想更新所有元素，或者您需要讓點擊事件傳播但仍希望成爲能夠在一些點擊事件中進行區分。

雖然在您的具體情況stopPropagation()會更容易偏離。

$('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 - 驗證click事件

來源

2013-02-05 20:48:10 Nope

jQuery - 顯示/隱藏搜索框

回答

相關問題