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的代码，它的效果比我的要好一些，但是当我点击“主菜单”时它会打开，我仍然需要再次点击它才能关闭，但是当我点击“孩子们”时菜单“在”主菜单“正下方打开。

我知道我已经接近了，哈哈，呃。

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

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

Answer 2

我在网站上做了类似的事情。你需要给他们所有的课程，并在点击一个时执行以下操作：

$('#desserts').click(function(){
    $('.menus').hide();
    $('#desserts').show();
});

当您点击甜点时，首先关闭所有菜单，然后打开甜点。我不完全明白你想要展示和隐藏什么，但我相信你能够适应它。

Answer 3

尝试使用下划线_或短划线-代替id属性的空格。正如布雷特在评论中所说，带空格的那些是无效的。

至于隐藏它们，你可以给div一个共同的类

<div class="image" id="main-menu"> ... </div>

并使用document.getElementsByClassName('class-name')检索要循环并隐藏的数组（在显示所选数组之前）。

var divs = document.getElementsByClassName('image');
for(var i in divs){
    div.style.display = 'none';
}

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

3 个答案: