jquery水平子菜单在菜单上打开点击

也许这是一个相关的问题，但我找不到一个好的解决方案，所以这里是我的问题。我有一些子项目的水平菜单。当我点击主菜单时，显示子菜单，即使点击页面上的任何位置，它仍然保持打开状态。但是，这里是棘手的部分，当我点击一个菜单项（在子菜单中）时，我希望子菜单显示页面所在的项目。例如，菜单如下所示：home，page1，page2和（page1）的子菜单：page1a，page1b。所以当我点击page1时，打开了page1a和page1b的子菜单，但是当我点击page1a时，page1a的页面打开，但子菜单仍然关闭，而我希望它显示page1的子菜单。下面是HTML菜单，我有：jquery水平子菜单在菜单上打开点击

<ul id="topnav"> 
    <li> 
     <a href="index.html">Home</a> 
    </li> 
    <li> 
     <a href="#">Over Meves</a> 
     <!--Submenu begint hier--> 
     <span> 
      <a href="#">Historie</a> | 
      <a href="#">Onze mensen</a> | 
      <a href="#">Werkzijze</a> 
     </span> 
    </li> 
    <li> 
     <a href="#">Disciplines</a> 
     <!--Submenu begint hier--> 
     <span> 
      <a href="vervolg.html">Klimaatbeheersing</a> | 
      <a href="#">Elektrotechniek</a> | 
      <a href="#">Sanitaire techniek</a> | 
      <a href="#">Energiebesparingstechniek</a> | 
      <a href="#">Bouwfysica en geluid</a> | 
      <a href="#">Diensten energiebesparing</a> 
     </span> 
    </li> 
    <li> 
     <a href="#">Expertise</a> 
     <!--Submenu begint hier--> 
     <span> 
      <a href="#">Woningbouw & Utiliteit</a> | 
      <a href="#">Zorg & Welzijn</a> | 
      <a href="#">Milieu & Energie</a> | 
      <a href="#">Beheer & Onderhoud</a> | 
      <a href="#">EPA & EPC</a> | 
      <a href="#">Legionella beheersing</a> 
     </span>    
    </li> 
    <li> 
     <a href="#">Contact</a> 
     <!--Submenu begint hier--> 
     <span> 
      <a href="#">Adres & route</a> | 
      <a href="#">Werken bij</a> 
     </span> 
    </li> 
</ul>

打开子菜单中的jQuery：

<script type="text/javascript"> 
var ddmenuitem = 0; 
function jsddm_open() 
{ jsddm_close(); 
ddmenuitem = $(this).find('span').css('display', 'block'); 
} 
function jsddm_close() 
{ 
if(ddmenuitem) ddmenuitem.css('display', 'none'); 
} 
$(document).ready(function() 
{ 
$('#topnav > li').bind('click', jsddm_open) 
$('#topnav > li > a').click(function(){ 
if ($(this).attr('class') != 'active'){ 
$('#topnav li a').removeClass('active'); 
$(this).addClass('active'); 
} 
}); 
$('.project-tekst').trimTxt(); 
}); 
</script>

而对于菜单的CSS：

ul#topnav 
{ 
float: left; 
width: 900px; 
background: #00537F; 
padding: 0; 
margin: 0; 
margin-top: 3px; 
position: relative; 
list-style: none; 
font-size: 12px; 
} 
ul#topnav li 
{ 
float: left; 
margin: 0; 
padding: 0; 
} 
ul#topnav li a 
{ 
padding: 5px 15px; 
color: #00537F; 
text-decoration: none; 
display: block; 
font-weight: bold; 
} 
ul#topnav li a:link 
{ 
color: #FFF; 
text-decoration: none; 
} 
ul#topnav li a:visited 
{ 
color: #FFF; 
text-decoration: none; 
} 
ul#topnav li a:hover 
{ 
color: #FFF; 
text-decoration: underline; 
} 
ul#topnav li a.active 
{ 
text-decoration: underline; 
color: #FFF; 
} 
ul#topnav li span 
{ 
float: left; 
padding: 4px 0; 
position: absolute; 
left: 0; 
top: 24px; 
display: none; 
background: #e0e0e0; 
color: #00537F; 
} 
ul#topnav li span a 
{ 
display: inline; 
color: #00537F; 
padding: 4px 8px; 
} 
ul#topnav li span a:link 
{ 
color: #00537F; 
} 
ul#topnav li span a:visited 
{ 
color: #00537F; 
} 
ul#topnav li span a:hover 
{ 
text-decoration: underline; 
color: #00537F; 
} 
ul#topnav li span a.active 
{ 
text-decoration: underline; 
color: #00537F; 
}

我希望你们能帮助我与此。

谢谢

来源

2011-11-15 udigital

任何人都可以帮助我吗？ – udigital

我已将代码添加到jsfiddle.net：[http://jsfiddle.net/ud2011/QQQdH/4/]。正如你所看到的，即使点击不同的菜单项，onclick也可以工作，但这只有在没有设置href（仅仅是＃）时才起作用。请看看，让我知道。 – udigital

没有人能帮助我？ – udigital

我不知道我是否理解这个问题。

这里就是我在做的jsfiddle：http://jsfiddle.net/QQQdH/765/

首先，我添加了当前类的学科菜单上（就像如果我是纪委页）。

<a href="http://google.com/" class="current">Disciplines</a>

第二，在点击监听器中，当有电流时，我停止传播（进入href）。所以用这个菜单

$('#topnav > ul > li > a').click(function(ev){ 
    if ($(this).hasClass('current')) { 
     ev.preventDefault(); 
    }

，我可以看到子菜单，即使有一个HREF =“东西”。

来源

2014-03-19 21:24:49 progysm

jquery水平子菜单在菜单上打开点击

回答

相关问题