如何使用向上和向下箭头菜单栏? [英] How to do menu bar with up and down arrow?
本文介绍了如何使用向上和向下箭头菜单栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我有通过以下代码创建的侧边栏菜单.但是我想在图像显示子项目时在图像的右侧显示UpArrow，并在用户单击下面的菜单或上层菜单时在相同的位置显示DownArrow，请用ex进行答复.我使用了以下代码:
Hi all,
I''ve side bar menu which have created through following code. But I want to show, UpArrow on right side of the image when it''s showing sub items and want to show DownArrow at same position when user Clicked on below menu or upper menu,Please reply with ex. I used the following code:
<head runat="server">
<title>Untitled Page</title>
<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
var currentOpenItemName="";
function showHide(theid)
{
if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide
(currentOpenItemName);
if (document.getElementById)
{
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show')
{
switch_id.className = 'show';
menu_status[theid] = 'show';
currentOpenItemName = theid;
}
else
{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
currentOpenItemName = "";
}
}
}
//-->
</script>
<style type="text/css">
.menu1
{
background-color:Olive;
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
width: 67px;
border: thin solid #FF0000
}
.submenu
{
background-color:Blue;
margin-left:25px;
display: block;
height: 19px;
padding-left:20px;
padding-top: 2px;
color:White;
width: 67px;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="menu1" önclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu3')">Menu 3 </a>
<div id="mymenu3" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu4')">Menu 4 </a>
<div id="mymenu4" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu5')">Menu 5 </a>
<div id="mymenu5" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
</div>
</form>
</body>
</html>
推荐答案
一种快速的解决方案是添加两个新的CSS类
A quick solution is adding two new css classes
.menuArrowUp {
padding-left: +16px;
background-repeat: no-repeat;
background-image: url("images/ArrowUp.png");
}
.menuArrowDown {
padding-left: +16px;
background-repeat: no-repeat;
background-image: url("images/ArrowDown.png");
}
然后在事件处理程序中，传递锚定元素clicked
Then in the event handler, pass in the anchor element clicked
只需在切换菜单的类时更改锚的类，就像这样，
And just change the anchor''s class when you toggle the class of the menu, like so,
function showHide(theid, a) {
if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
if (document.getElementById)
{
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
currentOpenItemName = theid;
a.className = 'menu1 menuArrowDown';
} else {
switch_id.className = 'hide';
menu_status[theid] = 'hide';
currentOpenItemName = "";
a.className = 'menu1 menuArrowUp';
}
}
}
不是最干净的，但是它可以胜任工作.
Not the cleanest but it gets the job.
这篇关于如何使用向上和向下箭头菜单栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
