Question

当你按下按钮/ div时，我已经制作了一个滑出侧边栏，但是我希望按钮/ div也可以用它滑出来这里是我试过的

<html>
<meta name="viewport" content="width=device-width"/>


<div id="header1">
<p>BillIsChill<p>
<div id="menubutton">
<hr id="hr1">
<hr id="hr2">
<hr id="hr3">
</div>



</div>


<?php include('sidebar.html');?>


<script src="/Scripts/script.js" type="text/javascript"></script>   
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">      </script> 
<link type="text/css" rel="stylesheet" href="desktopstyle.css" />
<link type="text/css" rel="stylesheet" href="style_darkcyan.css" />
<link type="text/css" rel="stylesheet" href="sidebarBETA.css" />     <body>


<script>
$(document).on("click", "#menubutton", function(){
$('#sidebarright').toggle('slow');
})
</script>

这是我正在使用的相关风格

#menubutton.open{
right: 205;
}
#menubutton{
display-inline;
width:50px;
height:50px;
background:#006666;
float:right;
border-radius:10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right:5px;
right: 5px;

}
#menubutton:hover{
background:cadetblue;
}
#sidebarright.open{
right: 1;
}      
#sidebarright{
 background: darkcyan;
 text-align: center;
 z-index: 2;
 position: fixed;
 height: 100%;
 width: 200px;
 float: right;
 top: 0;
 overflow-y: scroll;
 overflow-x: hidden;
 transition: right 0.5s;
 right:-200;  
 }

有人可以帮助我

Answer 1

这有效

<body>
<style>
.open { display:none; }
#buttonWrapper, #optionsWrapper { float:left; }
ul { margin:0; }
</style>
<div id="menu">
  <div id="optionsWrapper">
    <div id="options" class="open">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>
  </div>
  <div id="buttonWrapper">
  <button id="button">Click</button>
  </div>
</div>

<script type="text/javascript">
$('#button').click(function(){
    $('#options').toggleClass('open');
})
</script>
</body>

Answer 2

我认为代码块格式不正确。但是在css之下应该解决你的问题。

#menubutton.open{
   right: 205;
}
#menubutton{
   display-inline;
   width:50px;
   height:50px;
   background:#006666;
   float:right;
   border-radius:10px;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-right:5px;
   right: 5px;
}
#menubutton:hover{
   background:cadetblue;
}
#sidebarright.open{
   right: 1;
}      
#sidebarright{
   background: darkcyan;
   text-align: center;
   z-index: 2;
   position: fixed;
   height: 100%;
   width: 200px;
   float: right;
   top: 60px;
   overflow-y: scroll;
   overflow-x: hidden;
   transition: right 0.5s;
   right:-200;  
   overflow: auto;
 }
 #header1 {
  z-index: 3;
 }

使用jquery移动div /按钮

2 个答案: