Question

点击图片后，我设法显示菜单。然后，我想要在单击image2后再次隐藏菜单。如果有人可以帮助解释他们的方法是如何工作的那将是伟大的！这是代码：

<html>
<head>
<style> 
h3 {
font-size: 30px;
}
p {
    font-size: 20px;
}

.onclick-menu-content {
    position: fixed;
    top: -15px;
    bottom: -15px;
    left: 0px;
    right: 0px;

    background-color: #000000;
    opacity: 0;
}
.onclick-menu-content h3, p, a{
    color: #ffffff;
    text-align: center;
    }

.menu{
    position: fixed;
    top: 10px;
    left: 10px;

}
.menu2{
    position: fixed;
    top: 10px;
    left: 10px;

    }
</style>
</head>
<body>
<div class="main-content">
<img src="menu.png" class="menu" onclick="show(onclick-menu-content)">
<h3 style="color: #0000ff; text-align: center"> This is the main Content </h3>
    <div class="onclick-menu-content" >
        <img src="menu2.png" class="menu2" onclick="hide(onclick-menu-content)">
            <h3>Menu</h3>
            <p><a href="">Home</a><br />
            <br />
            <a href="">Services</a><br />
            <br />
            <a href="">About Us</a><br />
            <br />
            <a href="">Contact Us</a></p><br />
        </div>
   </div>

<script>
function show(id) {
    document.getElementById(id).style.display = 'block';
}

function hide(id) {
document.getElementById(id).style.display = 'none';
   }
</script>
</body>
</html>

所以我编辑了代码，但要使用js，但是这种方法不起作用。

Answer 1

您的原始解决方案取决于菜单图像：焦点以显示菜单。这不是一个很好的方法，因为如果用户试图进入菜单标签，焦点将丢失在图像上，然后菜单消失。

相反，使用一些JavaScript来显示/隐藏您的菜单。我在下面的例子中用jQuery完成了它因为我很懒，所以它需要你包含jQuery库。

小提琴：http://jsfiddle.net/nxy9jkdx/1/

HTML：

<div tabindex="0" class="onclick-menu" >
    <img src="image.jpg" class="menu2">
    <div class="onclick-menu-content hidden">
         <h3>Menu</h3>

        <ul class="menu-list">
            <li><a href="">Home</a>
            </li>
            <li><a href="">Services</a>
            </li>
            <li><a href="">About Us</a>
            </li>
            <li><a href="">Contact Us</a>
            </li>
        </ul>
    </div>
</div>

CSS：

h3 {
    font-size: 30px;
}
p {
    font-size: 20px;
}
.onclick-menu {
    position: relative;

}
.onclick-menu-content {
    padding: 10px;
    top: -15px;
    bottom: -15px;
    left: 0px;
    right: 0px;
    background-color: #000000;
    transition: visibility 0.5s;
}
.onclick-menu-content h3, a {
    color: #ffffff;
    text-align: center;
}
.menu2 {
    /* image 2*/
    position: fixed;
    top: 10px;
    left: 10px;
}
.menu-list {
    margin: auto;
    padding: 0;
    text-align: center;
    list-style: none;
}
.hidden {
    display: none;
}

jQuery（您可以将其放在<head>内或</body>关闭的正上方）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
    /* This tells jQuery not to run the code inside until the DOM is ready */

    $(document).ready( function () {

        $("img.menu2").on("click", function(){
            $(".onclick-menu-content").toggleClass("hidden");
        });

    });
</script>

Answer 2

使用这两个Javascript函数：

function show() {
    document.getElementById("onclick-menu-content").style.display = 'block';
}

function hide() {
   document.getElementById("onclick-menu-content").style.display = 'none';
}

你的HTML应该是这样的：

<div tabindex="0" class="onclick-menu" onclick="show()">
<img src="menu2.png" class="menu2" onclick="hide()">

使用css js显示后隐藏内容

2 个答案: