无法在点击图片上打开菜单 [英] Not able to open menu on click image
问题描述
嗨
我想在单击图像时打开菜单选项，并在单击同一图像时关闭菜单选项.请您能帮帮我吗?
对于此图像，我要打开菜单选项(离开左侧)
< img src ="images/dwn_arw.png" alt =" width ="18" height ="12"/>
Hi
i want to open menu option on clicking image and close menu option on clicking the same image .can you please help me?
For this image i want to open menu option ( left of departure)
<img src="images/dwn_arw.png" alt="" width="18" height="12" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Group</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/scrollpanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
</head>
<body>
<div id="wrapper">
<div class="login_cont">
<div class="topbar">
<div class="home_icon"><a href="#"><img src="images/back-arw.png" alt="Home" title="Home" /></a></div>
<h1 class="fr"><a href="#"><img src="images/icon1.png" alt="" /></a></h1>Departures
<a href="#"><img src="images/dwn_arw.png" alt="" width="18" height="12" /></a>
<div class="cl"></div>
</div>
<div class="mid_cont">
<div class="grid_cont">
<div class="from_cont">
<div class="fl width60"><input name="" type="text" class="frm_txtfield" width="80%" /></div>
<div class="fr"><input name="" type="button" class="heading_btn fr" value="Change" /></div>
<div class="cl"></div>
</div>
<div class="from_cont to_cont">
<div class="fl width60"><input name="" type="text" class="frm_txtfield" width="80%" /></div>
<div class="fr"><input name="" type="button" class="heading_btn fr" value="Change" /></div>
<div class="cl"></div>
</div>
<div id="scroll-pane">
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="active">
<td width="30%" valign="top">P1</td>
<td width="30%" valign="top">09:05 - 14:15</td>
<td width="35%" valign="top">Glasgow (GLC)
<p><span>FC 2C03</span></p>
</td>
<td width="5%" align="left"><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P3</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P2</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/error-msg.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P4</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P4</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P4</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P4</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
<tr>
<td valign="top">P4</td>
<td valign="top">09:05 - 14:15</td>
<td valign="top">Glasgow (GLC)</td>
<td><img src="images/correct-icon.png" width="24" height="24" /></td>
</tr>
</table>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>推荐答案
1. Add javascript.
1. Add javascript.
<script>
var menuShown = false;
function onMenuClick()
{
if (menuShown)
{
// hideMenu();
document.getElementById('menu').style.display = 'none';
}
else
{
// showMenu();
document.getElementById('menu').style.display = 'block';
}
menuShown = !menuShown;
}
</script>
2. Add style
2. Add style
<style>
#menu
{
display: none;
width: 200px;
border: solid 2px green;
}
</style>
3. Add menu (I added before the div with id=wrapper)
3. Add menu (I added before the div with id=wrapper)
<div id='menu'>
<ul>
<li>Menu option 1</li>
<li>Menu option 2</li>
<li>Menu option 3</li>
</ul>
</div>
4. Add handler to image element
4. Add handler to image element
<img src="images/dwn_arw.png" alt="" width="18" height="12" onclick="onMenuClick();" />
5. Swear when you realize that the menu moves the rest of the content around.
6. Spend some time making menu look nice and appear in right spot
7. Discover that you could have used "position: absolute;" and "z-index: 2;" as well as "left" and "top" in the css for the menu, to make it appear anywhere on page, in front of other content.
8. Laugh to yourself since you read the whole post first and now know how to deal with #5 and #6. ;)
5. Swear when you realize that the menu moves the rest of the content around.
6. Spend some time making menu look nice and appear in right spot
7. Discover that you could have used "position: absolute;" and "z-index: 2;" as well as "left" and "top" in the css for the menu, to make it appear anywhere on page, in front of other content.
8. Laugh to yourself since you read the whole post first and now know how to deal with #5 and #6. ;)
这篇关于无法在点击图片上打开菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
