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 - 显示/隐藏搜索框

回答

相关问题