使用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

回答

相關問題