點擊圖標不會顯示導航抽屜

我正在創建一個網頁，其中我有一個側面導航抽屜在左邊，主要內容在右邊。點擊圖標顯示導航抽屜時，它不會顯示。點擊圖標不會顯示導航抽屜

我的HTML代碼：

<div class="navContainer" > 

<p id="headingOfThePage">Wedding Planner</p> 

<div class="navDrawer"> 

<ul> 
<li><a href="javascript:void(0)" class="closebtn" onclick="closeDrawer()">&times;</a> 
<li><a href="#">Home</a></li> 
<li><a href="#">Sign-In</a></li> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Contact Us</a></li> 
<li><a href="#">Share</a></li> 
</ul> 

</div> 
<div class="drawerIcon"> 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
</div> 

</div>

我的CSS代碼是：

.navContainer{ 
    width:100%; 
    height:50px; 
    background-color: lightblue; 
    display:"inline" 




} 

.navDrawer{ 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
    display:"inline" 

} 

.navDrawer a{ 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 

} 

.navDrawer a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.navDrawer .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

@media screen and (max-height: 450px) { 
    .navDrawer {padding-top: 15px;} 
    .navDrawer a {font-size: 18px;} 
}

我已經連接到抽屜式導航欄圖標的腳本是：

<script> 

function openNav() { 
    $("#navDrawer").css("width","250px"); 
} 

function closeNav() { 
    $("#navDrawer").css("width","0px"); 
} 

</script>

在點擊導航抽屜圖標，抽屜沒有得到顯示。如何解決這個問題？

來源

2017-02-04 shikher mishra

它不起作用，因爲您使用的是#navDrawer而不是.navDrawer，因爲您的元素類爲.navDrawer而不是id。此外，您在近距離點擊時調用了錯誤的功能。考慮下面的代碼片段：

function openNav() { 
 
    $(".navDrawer").css("width","250px"); 
 
} 
 

 
function closeNav() { 
 
    $(".navDrawer").css("width","0px"); 
 
}

.navContainer{ 
 
    width:100%; 
 
    height:50px; 
 
    background-color: lightblue; 
 
    display:"inline" 
 

 

 

 

 
} 
 

 
.navDrawer{ 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    display:"inline" 
 

 
} 
 

 
.navDrawer a{ 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 

 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
} 
 
.drawerIcon{ 
 
    display:inline; 
 
    position:relative; 
 
    top:-60px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navContainer" > 
 

 
<p id="headingOfThePage">Wedding Planner</p> 
 

 
<div class="navDrawer"> 
 

 
<ul> 
 
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Sign-In</a></li> 
 
<li><a href="#">About Us</a></li> 
 
<li><a href="#">Contact Us</a></li> 
 
<li><a href="#">Share</a></li> 
 
</ul> 
 

 
</div> 
 
<div class="drawerIcon"> 
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
 
</div> 
 

 
</div>

來源

2017-02-04 10:34:53

點擊圖標不會顯示導航抽屜

回答

相關問題