使用css显示后隐藏内容js

我已经设法显示一个菜单，一旦我点击图像。然后，我希望菜单在点击image2后再次隐藏。如果有人能够帮助并解释他们的方法如何工作，那将是非常棒的！下面是代码：使用css显示后隐藏内容js

<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，但是这个方法行不通。

来源

2014-10-30 user1854914

你可以给你的JavaScript处理“显示”功能吗？ – 2014-10-30 16:14:46

我没有使用任何JavaScript。我使用的所有代码如上所示。 – user1854914 2014-10-30 16:16:43

哦，我明白了。我从来没有见过这种方法，显示/隐藏完全基于：焦点 - 它相当脆弱，当键盘用户尝试键入菜单项时会发生什么？焦点丢失，菜单消失。 – 2014-10-30 16:38:08

使用这两个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()">

来源

2014-10-30 16:23:25

我试过这个，它似乎没有做任何事情：/ – user1854914 2014-10-30 16:32:58

通常它工作正常我用bouttons它，但我认为它是同样的事情。 – 2014-10-30 16:51:24

我修改了代码（见上）。你能告诉我哪里出了问题吗？ – user1854914 2014-10-30 16:52:35

你原来的解决方案是依赖于菜单图像上有：重点以显示菜单。这不是一个很好的方法，因为如果用户试图在菜单中选项卡，图像上的焦点将丢失，然后菜单消失。

相反，使用一些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>

来源

2014-10-30 17:00:06

我看到它适用于jsfiddle。然而，我将代码放入记事本++，并尝试通过以下方式对其进行测试：run - > launch in chrome，它显示图像并且在点击时不起作用：S – user1854914 2014-10-30 17:10:28

添加您的jQuery库： – 2014-10-30 17:11:24

我添加了它，但仍然无法正常工作。对不起，我对这个新的 – user1854914 2014-10-30 17:18:41

使用css显示后隐藏内容js

回答

相关问题