js如何實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果

發(fā)布時(shí)間：2021-04-20 10:20:03 來源：億速云閱讀：136 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)js如何實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

JS是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。

通過onclick單擊事件，實(shí)現(xiàn)效果，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>開關(guān)按鈕設(shè)置</title>
  </head>
  <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" />
  <style>
    div{
    width:120px;
    margin: 0px auto;
    border: 2px solid black;}
    ul{
      display: none;
    }
  </style>
  <script>
    window.onload=function(){
      var odiv=document.getElementById("v");
      var oli=odiv.getElementsByTagName("ul")[0];
      var   onf=true
        odiv.onclick=function(){
          if (onf==true) {
            oli.style.display='block';
            onf=false
          } else{
            oli.style.display='none';
            onf=true
          }
        }
    }
  </script>
  <body>
    <div id="v">
      <h5>你好啊，小老弟</h3>
    <ul>
      <li>come</li>
      <li>on</li>
      <li>do</li>
    </ul>
    </div>
     
  </body>
</html><br>

實(shí)現(xiàn)效果：

js如何實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果

感謝各位的閱讀！關(guān)于“js如何實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果

JS是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽