如何綁定的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（）函數時，點擊菜單

回答

相關問題