展开式菜单内部的链接未打开

Question

我遇到了与展开菜单有关的问题。我似乎无法链接到扩展菜单之外，因为菜单中所有链接所做的唯一操作就是将其折叠或者完全不做任何操作。

这是菜单系统的两个例子，我想创建： http://www.ullastiina.fi/testsite/page.html http://www.ullastiina.fi/testsite/page2.html

我试图寻找到这几个小时，但现在目前处于完全停顿我。有谁能够帮助我？

page.html中

HTML

<div class="divcenter"> 
<div class="menu"> 
<a href="#" class="hide"><font color="#ffffff">+ Expand</font></a> 
<a href="#" class="show"><font color="#ffffff">- Collapse</font></a> 
<ul id="list"> 
<li class="li1">BLANK TEXT TITLE</li> 
<li class="li2"><a href="http://www.google.com/" target="_blank">Link 1</a></li> 
<li class="li2"><a href="http://www.hotmail.com/">Link 2</a></li> 
</ul> 
</div> 
</div> 

CSS

#list, .show { 
display:none; 
color: #5e5e5e; 
font-weight: normal; 
padding:10px; 
list-style-type:none} 
.hide:focus + .show {display: inline;} 
.hide:focus { display: none; position:relative;} 
.hide:focus ~ #list { display:block;} 

PAGE2.HTML

<div class="divcenter"> 
<div class="menu"> 
<li> 
<a href="?op=1"><font color="#FFFFFF">+ Expand</font></a> 
<div class="nav-collapse88"> 
<ul> 
<li class="li1"><font color="#666666">BLANK TEXT TITLE</font></li> 
<li class="li2"><a href="http://www.google.com/" target="_blank">Link 1</a></li> 
<li class="li2"><a href="http://www.hotmail.com/">Link 2</a></li> 
</ul> 
</div> 
</div> 

JS

$(function(){ 
$(".nav-collapse88").hide(); 
$("a").click(function(e){ 
e.preventDefault(); 
$(".nav-collapse88", $(this).parent()).slideToggle(); 
}); 
}) 

Answer 1

你的js没有意义。试试这个：

$(function(){ $(".menu ul").hide(); $(".hide").click(function(e){ e.preventDefault(); $(".hide").hide(); $(".show").show(); $(".menu ul").slideDown(); }); $(".show").click(function(e){ e.preventDefault(); $(".show").hide(); $(".hide").show(); $(".menu ul").slideUp(); }); });

或参阅本Fiddle。希望这可以帮助。