点击图标不会显示导航抽屉

问题描述：

我正在创建一个网页，其中我有一个侧面导航抽屉在左边，主要内容在右边。点击图标显示导航抽屉时，它不会显示。点击图标不会显示导航抽屉

我的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>

在点击导航抽屉图标，抽屉没有得到显示。如何解决这个问题？

答

它不起作用，因为您使用的是#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>

点击图标不会显示导航抽屉

相关推荐