How to bind jQuery .css() function when click menu？ -

i have following code:

html part：

<div id="primary"></div> 

js part：

$(function() { var menu_contents =  [      {title: "aa", href: "a.html", submenu:         [             {title: "bb", href: "b.html", id: "bb"},             {title: "cc", href: "c.html", id: "cc"},             {title: "dd", href: "d.html", id: "dd"}         ]     },     {title: "ee", href: "e.html", id: "ee"}, ];  html = $('<div id="secondary">').append($('<div class="block">')                                 .append('<h1 id="h1"  style="color:#ffffff;">settings</h1>')                                 .append($('<div class="content">')                                 .append('<div id="menu">'))); html.insertafter('#primary');  $('#menu').append(menu(menu_contents));   function menu(m) {     var ul = $('<ul>')          $.each(m, function() {             var li = $('<li>')             li.append($('<a>', {text : this.title, href : this.href, id : this.id}));                        ul.append(li)             if(this.submenu) li.append(menu(this.submenu));         })      return ul; }  $('ul li ul li').each(function(){     $(this).replacewith($(this).html()); });  $(function() {     var pageurl = window.location.href.substr(window.location.href.lastindexof('/')+1);     $('#menu a').each(function(){         if($(this).attr('href') == pageurl || $(this).attr('href') == ''){             $(this).addclass('menuonselect');         }         else{             $(this).addclass('menuoffselect');         }     }); });  $('#ee').click(function() {     $('#bb,#cc,#dd').css('display','none'); })}); 

those code create simple menu：

    <div id="primary">        <div id="secondary">           <div class="block">           <h1 id="h1" style="color:#ffffff;">settings</h1>              <div class="content">                 <div id="menu">                    <ul>                    <li><a href="a.html" class="menuoffselect">aa</a>                       <ul>                          <a href="b.html" id="bb" class="menuoffselect">bb</a>                          <a href="c.html" id="cc" class="menuoffselect">cc</a>                          <a href="d.html" id="dd" class="menuoffselect">dd</a>                             </ul>                   </li>                   <li><a href="e.html" id="ee" class="menuonselect">ee</a></li>                   </ul>                </div>             </div>          </div>       </div> 

, question is... when click 1 of menu items, one：
<li> <a href="ee.html" id="ee" class="menuonselect">ee</a> </li>

it direct ee.html，but code doesn't work：
$('#ee').click(function() { $('#bb,#cc,#dd').css('display','none'); })
how make .css() not work when click menu items work after direct target page？can please？

your code work, idea flawed fiddle code

what happens is, #bb,#cc,#dd hidden, page navigates away, makes hiding them useless. can see hiding happens when add return false hiding function

$('#ee').click(function() {     $('#bb,#cc,#dd').css('display','none');     return false;//stop navigation }) 

i guess want add

$('#bb,#cc,#dd').css('display','none'); 

to ee.html