如何绑定的jQuery的.css（）函数时，点击菜单

HTML的一部分：

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

JS部分：

$(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'); 
})});

这些代码会创建一个简单的菜单：

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

我的问题是... 当我点击菜单项之一，像这样的：
<li> <a href="ee.html" id="ee" class="menuOnselect">EE</a> </li>

就会直接到ee.html，但这些代码不起作用：
$('#ee').click(function() { $('#bb,#cc,#dd').css('display','none'); })
如何使的.css（）不仅工作的时候点击菜单项也直接后工作目标页面？有谁能够帮助吗？

来源

2015-08-25 S.P.

乌尔链路ID是EE – Alex

@Alex我编辑我的问题，谢谢:-) –

什么る想达到什么目的？ – Alex

您的代码不工作，这个想法是有缺陷的Fiddle to your code

会发生什么事，＃BB，CC＃，＃DD得到隐藏的，但随后的页面导航离开，这使它们隐藏无用。你可以看到隐藏实际发生时加返回false就隐藏功能

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

我猜你想要做的是简单地添加

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

要ee.html

来源

2015-08-25 10:13:09 DrunkWolf

后，我添加返回false！;它不会使#ee直接指向目标网址。 –

是的，因为正如我所说的，代码工作，这个想法仅仅是缺陷，因为之前去到另一个URL隐藏元素是没有意义的。一旦你在那里，你需要隐藏它们。 – DrunkWolf

啊，我明白你的意思，而你的想法是完美的。我想从原来的html页面单独我的菜单，但这种想法是有缺陷的，谢谢！ –

添加您的验证码

$('#ee').click(function() { 
$('#bb,#cc,#dd').css('display','none'); 
})});

内部$(document).ready(function(){...above code});

来源

2015-08-25 10:13:09 Alex

如何绑定的jQuery的.css（）函数时，点击菜单

回答

相关问题