![](/img/trans.png)
[英]Bootstrap nav-bar not collapsing after being expanded (hamburger icon)
[英]Nav-bar not expanding after being collapsed?
在我制作的这个简单的展开/折叠导航栏中,第二个导航栏一旦折叠就不会重新展开,尽管第一个导航栏工作正常。 一旦我折叠了第二部分,尽管第一部分仍然可以正常工作,扩展和折叠,但它仍然保持折叠状态并且不会扩展,谢谢。感谢所有帮助。
这是我的代码如下:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><a href="javascript:Change(1, 0)" id="Link-1"><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></a></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<a href="javascript:void(null)"></a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<a href="javascript:Change(2, 0)" id="Link-2"><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/></a>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5" >Test5</a>
<a id="Link-6" >Test6</a>
<a id="Link-7" >Test7</a>
<a id="Link-8" >Test8</a>
<a href="javascript:void(null)"></a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>
问题是您多次使用link-1
的ID。 并请检查您的打开和关闭div是否匹配。
我将您的功能更改为:
function Change(sec, state) {
console.log('Change(sec, state)', sec, state);
var section = document.getElementById("Sec-"+sec);
var menu = document.getElementById("Menu-"+sec);
var menulink = document.getElementById("MenuLink-"+sec); // <-- new MenuLink
if (state == 0) {
section.src = "collapsed.gif";
menu.style.display = "none";
menulink.href = "javascript:Change("+sec+", 1)";
}
else {
section.src = "expanded.gif";
menu.style.display = "inline";
menulink.href = "javascript:Change("+sec+", 0)";
}
}
和匹配的html。 我使用了MenuLink-1
而不是Link-1
因为Link-1
已经用于另一个元素。
<span class="title" id="community">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
您必须对MenuLink-2
做同样的MenuLink-2
这是完整的html,其中div的打开和关闭的嵌套匹配:
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community1">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-1">
<a id="Link-1">m1.1</a>
<a id="Link-2">m1.2</a>
<a id="Link-3">m1.3</a>
</div>
</div>
<span class="title" id="community2">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(2, 0)" id="MenuLink-2">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</a>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5">m2.5</a>
<a id="Link-6">m2.6</a>
<a id="Link-7">m2.7</a>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.