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

或者看到这个Relevant info from Input command from the Docs:。希望这会有所帮助。

扩展菜单内的链接无法打开

1 个答案: