jQuery - 検索ボックスを表示/非表示

Question

divをクリックしたときに検索ボックスをスライドさせるためにjQueryを少し書いています。基本的には、クリックするとdivに最初に隠されたdivが表示されます。そのdivは検索ボックスとクローズボタンです。それはすべて正常に動作しています。ただし、閉じるボタンは動作しません。私の推測では、閉じるボタンがdivを隠していないのは、div自体がdiv内にあるためです。ここに私が持っているものがあり、ここには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; 
} 

はまた、ここではイニシアの例の画像です私は何をしようとしているのかを視覚的に知るために、状態をクリックし、開いた状態にします。ありがとう！

Answer 1

閉じるボタンが.searchitボックス内にあるので、最初のハンドラはまた、右後に解雇されています。近くハンドラ中のクリックイベントの伝播を停止し、それが動作するはずです：stopPropagation()へ

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

Answer 2

代替のみ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は - 伝播の短いと甘い防止のための

---