ein div/Taste mit Jquery bewegen

-1

Ich habe eine Folie aus Sidebar gemacht, das herauskommt, wenn eine Taste/div drücken, aber ich möchte, dass die Taste/div auch hier mit ihm heraus schieben ist, was ichein div/Taste mit Jquery bewegen

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

versucht haben,

und hier mein relevanter Stil ist, dass ich

#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; 
}

bin mit Kann mir jemand bitte helfen

Quelle

2016-05-04 Nik Hendricks

Können Sie bitte den HTML-Code hinzufügen? – Gerard

Obwohl Sie die beiden Ereignishandler zusammen verbinden können, gibt es nichts direkt falsch mit dem Code, den Sie angezeigt haben. Das Problem muss an anderer Stelle in Ihrem CSS- oder JS-Code liegen. Leider kann Ihnen niemand helfen, es sei denn, Sie bearbeiten Ihre Frage, um diesen Code anzuzeigen. –

Es ist nur ein div styled aussehen wie ein Menü-Button und Zeug für den Header und Linking Stil und PHP –

Ich denke Code Blöcke sind nicht richtig formatiert. Aber unter CSS sollte dein Problem beheben.

#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; 
}

Quelle

2016-05-06 03:47:26

Dies funktioniert

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

Quelle

2016-05-04 22:53:44 Gerard

der Code oben funktioniert nicht für mich –

Ich habe eine Geige für Sie erstellt: https://jsfiddle.net/beekvang/tvdhqhnz/3/ – Gerard

Ich kann nicht scheinen, um einen reibungslosen Übergang zur Arbeit in css –

ein div/Taste mit Jquery bewegen

Antwort

Verwandte Themen