錯誤的HTML CSS不工作

-2

我從Youtube教程WATCH HERE複製了這個，並與一些人討論它，並讓兩個文件都運行通過語法錯誤編程CLLlint和w3validator。沒有錯誤出現，但菜單沒有打開/反應應該如何。錯誤的HTML CSS不工作

$(document).ready(function() { 
 
    $('sidebar-btn').click(function() { 
 
    $('#sidebar').toggleClass('visible'); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Helvetica Neue", helvetica, arial, sans-serif; 
 
} 
 

 
.sidebar { 
 
    background: #33676767; 
 
    width: 200px; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    left: -200px; 
 
    top: 0; 
 
    transition: left 0.3s linear; 
 
} 
 

 
.sidebar.visible { 
 
    left: 0; 
 
    transition: left 0.3s linear; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
ul li a { 
 
/* color: white; */ 
 
    width: 180px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
.sidebar-btn { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 20px; 
 
    height: 15px; 
 
    cursor: pointer; 
 
    margin: 20px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -50px; 
 
} 
 

 
.sidebar-btn span { 
 
    height: 1px; 
 
    background: #66CC33; 
 
    margin-bottom: 5px; 
 
    display: block; 
 
} 
 

 
.sidebar-btn span:nth-child(2) { 
 
    width: 75%; 
 
} 
 

 
.sidebar-btn span:nth-child(3) { 
 
    width: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div class="sidebar"> 
 

 
    <ul> 
 
    <li><a href="/index.html">Home</a></li> 
 
    <li><a href="/index.html">Sweet</a></li> 
 
    <li><a href="/index.html">Home</a></li> 
 
    <li><a href="/index.html">All</a></li> 
 
    <li><a href="/index.html">4One</a></li> 
 
    </ul> 
 

 
    <div class="sidebar-btn"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 

 
    </div> 
 

 
</div>

來源

2017-05-03 Fabian St.

應該是什麼這個代碼預期的行爲？ –

驗證器報告：**在期待屬性名稱時看到<<'。可能的原因：緊接在**之前缺少'>'和其他幾個錯誤。 – Quentin

我爲你做了一個片段，並且意外地修復了至少一個缺少關閉腳本標記的問題 – mplungjan

解決您的jQuery選擇 - 你正在使用類而不是ID，因此像這樣做：

$(document).ready(function(){ 
    $('.sidebar-btn').click(function(){ 
     $('.sidebar').toggleClass('visible'); 
    });   
});

的通知 ''在之前缺少的'sidebar-btn'前面 - 這是類的選擇器，注意''。而不是'側邊欄'前的'＃'，這是一個選擇器類，而'＃'是選擇器ID

來源

2017-05-03 12:05:17

我沒有測試它，但你忘了。在sidebar-btn之前，#sidebar是一個id，但在html中它是一個類。

試試這個。

$(document).ready(function(){ 
    $('.sidebar-btn').click(function(){ 
     $('.sidebar').toggleClass('visible'); 
    });   
});

來源

2017-05-03 12:08:17

你有與該代碼的幾個問題：

你script標籤未關閉
你meta標籤未關閉
您針對sidebar作爲ID，但它被定義爲一個類
您在jQuery中的sidebar-btn缺少前導.來表示它是一個類

這裏是一個固定的工作示例 - 白顏色被註釋掉用於演示目的：

body 
 
    { 
 
     margin: 0; 
 
     padding: 0; 
 
     font-family:"Helvetica Neue", helvetica, arial, sans-serif; 
 
    } 
 

 
    .sidebar 
 
    { 
 
     background: #33676767; 
 
     width: 200px; 
 
     height: 100%; 
 
     display: block; 
 
     position:absolute; 
 
     left: -200px; 
 
     top: 0; 
 
     transition:left 0.3s linear; 
 
    } 
 

 
    .sidebar.visible 
 
    { 
 
     left:100px; 
 
     transition:left 0.3s linear; 
 
    } 
 

 
    ul 
 
    { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    ul li 
 
    { 
 
     list-style: none; 
 
     text-align: center; 
 
    } 
 

 
    ul li a 
 
    { 
 
     /* color: white; */ 
 
     width: 180px; 
 
     padding: 10px; 
 
     text-decoration: none; 
 
     font-size: 18px; 
 
    } 
 

 
    .sidebar-btn 
 
    { 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
     width: 20px; 
 
     height: 15px; 
 
     cursor: pointer; 
 
     margin: 20px; 
 
     position:absolute; 
 
     top: 0; 
 
     right: -50px; 
 

 
    } 
 

 
    .sidebar-btn span 
 
    { 
 
     height: 1px; 
 
     background: #66CC33; 
 
     margin-bottom: 5px; 
 
     display: block; 
 
    } 
 

 
    .sidebar-btn span:nth-child(2) 
 
    { 
 
     width: 75%; 
 
    } 
 

 
    .sidebar-btn span:nth-child(3) 
 
    { 
 
     width: 50%; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" type="text/css" href="home.css"> 
 
    <meta charset="utf-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    </head> 
 

 
<div class="sidebar" id="sidebar"> 
 

 
    <ul> 
 
     <li><a href="/index.html">Home</a></li> 
 
     <li><a href="/index.html">Sweet</a></li> 
 
     <li><a href="/index.html">Home</a></li> 
 
     <li><a href="/index.html">All</a></li> 
 
     <li><a href="/index.html">4One</a></li> 
 
    </ul> 
 

 
    <div class="sidebar-btn"> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 

 
    </div> 
 

 
</div> 
 

 
<script> 
 

 
    $(document).ready(function(){ 
 
     $('.sidebar-btn').click(function(){ 
 
      $('#sidebar').toggleClass('visible'); 
 
     });   
 
    }); 
 

 
</script> 
 

 
</html>

來源

2017-05-03 12:11:19 freginold

@mplungjan感謝編輯！ – freginold

YW - 很好，你看到了另一個錯誤，然後我做了一個片段，刪除它 – mplungjan

錯誤的HTML CSS不工作

回答

相關問題