Dropdown Menu, hide and display its value
I have a drop down menu consisting of animals. I would like to do something like, choose an animal from the dropdown menu, for example, dog. Then it will display something on a button with a value 'bark'. After that, I would like to choose another animal for example, cat. Then it will display something on a button with a value 'meow'. What I wanna do is, after I have clicked on the dropdown menu for cat(another animal). How can I hide the value of the dog(Whic开发者_如何学编程h is bark). Because what I did now, the value of the dog(bark) will still be displayed even after I choose the animal, cat. Thanks! Here's the code below...
<body>
<script type="text/javascript">
var timeout = 50;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<div id ="top1" style="position:absolute; top:1; left:80; z-index:1">
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Animals</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#" onclick="$('#chkdog').show(); return false;">Dog</a>
<a href="#" onclick="$('#chkcat').show(); return false;">Cat</a>
</div>
</li>
</ul>
<input id="chkdog" type="button" value="Bark" style="display:none;"> <br>
<input id="chkcat" type="button" value="Meow" style="display:none;"> <br>
</body>
Add a class to the "action" buttons (bark, meow), and do this on the onclicks:
`<a href="#" onclick="$('input.yourclassname').hide().filter('#chkdog').show(); return false;">Dog</a>
Look at it working here.
加载中,请稍侯......
精彩评论