应用js函数后单击不可能

Question

对不起，这会让人感到困惑，我已经将js函数应用到了侧边栏的div，所以当你点击左边的另一个栏幻灯片时。但它曾经使用悬停css函数。滑动侧边栏上有一些菜单可以点击。现在我已经改变了条形滑动的方式（使用css），你不能再点击它们了。

我的代码在那里但是片段看起来并不好看，因为尺寸错误我猜...抱歉，你可以看到它的样子here

function myFunction(x) {
    x.classList.toggle("change");
}

<script>
$(document).ready(function(){
  $("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
  });
});
</script>

#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}


.bar1, .bar2, .bar3 {
    cursor:pointer;
    position:relative;
    left:18px;
    top:25px;
    width: 35px;
    height: 5px;
    background-color:{color:Main icon background};
    margin: 6px 0px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -moz-transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
    -ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
    -ms-transform: rotate(45deg) translate(-8px, -8px) ;
}

/*------ SIDEBAR -----*/  
 
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
 
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s  ease;
-o-transition: all .5s  ease;
transition: all .5s  ease;
}
 
/*------ Narrow sidebar -----*/
 
#sidebar1{
    z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}

/*------ Wide sidebar -----*/
 
#sidebar2{
    z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s  ease;
-o-transition: all .5s  ease;
transition: all .5s  ease;
}

/* Avatar */
 
#avatar {
  margin: auto;
  margin-top: 65px;
  width: 50px;
  height: 50px;
  border-radius: 60px;
  border:0px solid
  z-index:10;
}

#avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#avatar img:hover {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -ms-transform: scale(1.4, 1.4);
  -webkit-transform: scale(1.4, 1.4);
  transform: scale(1.4, 1.4);
}

/* Description */
 
#description{
    position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
 
#description:after{ 
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
 
/* Search box */
 
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
 
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
 
/* Navigation */
 
#navi{
    cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
 
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}

#navi .fa-chevron-down {
  transition: all 0.7s ease;
}
.rtoate180 {
  transform: rotate(180deg);
}
 
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}

 
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s  ease-in-out;
-o-transition: all .7s  ease-in-out;
transition: all .7s  ease-in-out;
}
 
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s  ease-in-out;
-o-transition: all .7s  ease-in-out;
transition: all .7s  ease-in-out;
}
 
/* Social icons */
 
#socialicons{
margin-top:0px;
}
 
#socialicons i{
display:inline-block;  
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
 
#socialicons i:hover{
color:{color:Hover}!important;
}
 
/*----- MAIN CONTAINER -----*/
 
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}  
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
 
}

<div id="more">

<div id="sidebar">

<div id="sidebar1" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>

<div id="avatar"><img src="{image:Avatar}"></div>

</div>
 
<div id="sidebar2">
 

<div id="description">
{Description}</div>

<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>

<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
 
<!--Navigation-->
<div id="navigation">
 
<div id="navigationin">

<a href="{text:Link One Url}">{text:Link One Title}</a>

<a href="{text:Link Two Url}">{text:Link Two Title}</a>

<a href="{text:Link Three Url}">{text:Link Three Title}</a>

<a href="{text:Link Four Url}">{text:Link Four Title}</a>

<a href="{text:Link Five Url}">{text:Link Five Title}</a>

</div>
<!--End navigationin-->
 
<div id="socialicons">
<center>
<a href="{text:Facebook url}"  target = "_blank" title="facebook"><i class="fa fa-facebook-square"></i></a>
  <a href="{text:Twitter url}" target="_blank" title="twitter"><i class="fa fa-twitter-square"></i></a>
  <a href="{text:Flickr url}" title="flickr"><i class="fa fa-flickr"></i></a>
<a href="{text:Youtube url}" target="_blank" title="youtube"><i class="fa fa-youtube"></i></a>
</center>
</div>
<!--End socialicons-->
 
</div>

 
</div>
<!--End sidebar1-->
 
</div>
<!--End sidebar-->
 
</div>
<!--End more-->

非常感谢你，如果你能帮助我，我知道它不清楚......我很抱歉！

Answer 1

使用开发人员工具并查看#container - 它覆盖了您的侧边栏，因此 - 您无法点击它下面的内容。