Javascript 菜单显示 1 个图像并隐藏另一个

Question

我有一个简单的菜单栏，用于显示几个不同的菜单。当我点击第一个时，图像出现，但是当我点击第二个时，我需要第一个消失，第二个出现在它的位置。

现在发生的事情是我点击“主菜单”并打开它，但我需要再次点击它才能关闭它。

<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu">
<ul>
    <li><a href="#" onclick="hideshow('main_menu')">Main Menu Show</a></li>
    <li><a href="#" onclick="hideshow('gluten_friendly')">Gluten Friendly</a></li>
    <li><a href="#" onclick="hideshow('kids_menu')">Kids Menu</a></li>
  </ul>
</div>

<div id="main_menu" style="display:none;"><a href="http://xxxxxx"></div>
<div id="gluten_friendly" style="display:none;"><a href="http://xxxxx"></div>
<div id="kids_menu" style="display:none;"><a href="http://xxxxx"></div>

=====Javascript

<script type="text/javascript">
function hideshow(temp){
    var menu = document.getElementById(temp);
    if (menu.style.display=="block")
       menu.style.display="none"
    else
       menu.style.display="block"
    return false;
}
</script>

我已经更新了 Sid 的代码，它比我以前的代码好一点，但是当我点击“主菜单”时它打开了，我仍然需要再次点击它来关闭，而且当我点击“Kids”时在“主菜单”正下方打开的“菜单”。

我知道我越来越接近了，哈哈，呃。

这是我公司网站的一部分，所以我真的不想公开发布链接，但如果有人可以帮助我，请给我发一封电子邮件，我会把实时链接发给你，这样你就可以看到我的内容了我正在处理。非常感谢，我很乐意在论坛上记录帮助。

seansugden@britishbeer.com

Answer 1

以下可能不是最好的解决方案，但对我来说没问题。

HTML

<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu" >
  <ul>
    <li><a href="javascript:hideshow(document.getElementById('main_menu'))">Main Menu Show</a></li>
    <li><a href="javascript:hideshow(document.getElementById('gluten_friendly'))">Gluten Friendly</a></li>
    <li><a href="javascript:hideshow(document.getElementById('kids_menu'))">Kids Menu</a></li>
    <li><a href="javascript:hideshow(document.getElementById('desserts'))">Desserts</a></li>
  </ul>
</div>

<div id="main_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="gluten_friendly"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="kids_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="desserts"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>

JavaScript

function hideshow(temp){
    var menu = temp.id;

    if (menu == "main_menu") {
        document.getElementById('main_menu').style.display="block";
    }
    else
    {
       document.getElementById('main_menu').style.display="none";
    }

    if (menu == "gluten_friendly") {
        document.getElementById('gluten_friendly').style.display="block";
    }
    else
    {
       document.getElementById('gluten_friendly').style.display="none";
    }

    if (menu == "kids_menu") {
        document.getElementById('kids_menu').style.display="block";
    }
    else
    {
       document.getElementById('kids_menu').style.display="none";
    }

    if (menu == "desserts") {
        document.getElementById('desserts').style.display="block";
    }
    else
    {
       document.getElementById('desserts').style.display="none";
    }

}

Demo