html - jQuery No Toggle when element inside parent element is clicked -

i have simple search form toggled when link clicked. when try , click on text input field inside of form, toggle on list item fires , form hidden again. sure due form being child element of parent element. there way have toggle class work on parent element , not children? help.

jquery:

$('li.search').click(function(){     $('#search-box-container').toggle("fast"); }); 

html:

<li class="search"><a href="#">search     <ul id="search-box-container" style="display: none;">          <li>              <form name="catsearchform66594" method="post" action="/default.aspx?sitesearchid=2829&pageid={module_oid}">                  <div class="search-box">                      <input class="cat_textbox_small" type="text" name="cat_search" id="cat_search" />                      <input class="cat_button" type="submit" value="search" />                  </div>               </form>         </li>     </ul></a> </li> 

you have use class name of li event source anchor tag

live demo

$('li.search').click(function(event){     if($(event.target).parent().hasclass("search"))        $('#search-box-container').toggle("fast"); }); 

you can use event.target.tagname skip execution.

live demo

$('li.search').click(function(event){     if(event.target.tagname == "a")        $('#search-box-container').toggle("fast"); });