javascript - hacer - mostrar y ocultar el contenido de un div con un checkbox jquery
JQuery muestra y oculta div con el clic del mouse(anima) (5)
Ese método .toggle() se eliminó de jQuery en la versión 1.9. Usted puede hacer esto en su lugar:
$(document).ready(function() {
$(''#showmenu'').click(function() {
$(''.menu'').slideToggle("fast");
});
});
Demostración: http://jsfiddle.net/APA2S/1/
... pero como con el código en su pregunta que se deslizaría hacia arriba o hacia abajo. Para deslizar hacia la izquierda o derecha, puede hacer lo siguiente:
$(document).ready(function() {
$(''#showmenu'').click(function() {
$(''.menu'').toggle("slide");
});
});
Demostración: http://jsfiddle.net/APA2S/2/
Tomando nota de que esto requiere el efecto de deslizamiento de jQuery-UI , pero agregó esa etiqueta a su pregunta, así que asumo que está bien.
Este es mi código HTML:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
Y quiero mostrar .menu al hacer clic en #showmenu deslizamiento de izquierda a derecha (con animación). Al hacer clic de nuevo en #showmenu o en cualquier lugar de la página del sitio, el .menu se ocultará (deslizar hacia atrás a la izquierda).
Yo uso JQuery 2.0.3
Lo intenté, pero no hace lo que quiero.
$(document).ready(function() {
$(''#showmenu'').toggle(
function() {
$(''.menu'').slideDown("fast");
},
function() {
$(''.menu'').slideUp("fast");
}
);
});
Haría algo como esto
DEMO en JsBin : http://jsbin.com/ofiqur/1/
<a href="#" id="showmenu">Click Here</a>
<div class="menu">
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
y en jQuery tan simple como
var min = "-100px", // remember to set in css the same value
max = "0px";
$(function() {
$("#showmenu").click(function() {
if($(".menu").css("marginLeft") == min) // is it left?
$(".menu").animate({ marginLeft: max }); // move right
else
$(".menu").animate({ marginLeft: min }); // move left
});
});
Por supuesto, slideDown y slideUp no hacen lo que quieres, dijiste que quieres que sea izquierda / derecha, no arriba / abajo.
Si editas tu pregunta agregando la etiqueta jquery-ui significa que estás usando la interfaz de usuario de jQuery, iría con la solución de nnnnnn , usando el efecto de slide jQuery UI.
Si no:
Asumiendo que el menú comience a ser visible (edit: oops, veo que no es una suposición válida, mira la nota a continuación) , si quieres que se deslice hacia la izquierda y luego deslice hacia atrás desde la izquierda, podrías hacer esto : Ejemplo en vivo | Fuente en vivo
$(document).ready(function() {
// Hide menu once we know its width
$(''#showmenu'').click(function() {
var $menu = $(''.menu'');
if ($menu.is('':visible'')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().animate({left: 0});
}
});
});
Deberá colocar la position: relative en el elemento del menú.
Tenga en cuenta que reemplacé su toggle con un click , porque esa forma de toggle se eliminó de jQuery.
Si desea que el menú comience oculto, puede ajustar lo anterior. Desea saber el ancho del elemento, básicamente, cuando lo coloca fuera de la página.
A esta versión no le importa si el menú es inicialmente visible o no: Live Copy | Fuente en vivo
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<script>
$(document).ready(function() {
var first = true;
// Hide menu once we know its width
$(''#showmenu'').click(function() {
var $menu = $(''.menu'');
if ($menu.is('':visible'')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
}
});
});
</script>
</body>
</html>
Prueba esto:
<script type="text/javascript">
$.fn.toggleFuncs = function() {
var functions = Array.prototype.slice.call(arguments),
_this = this.click(function(){
var i = _this.data(''func_count'') || 0;
functions[i%functions.length]();
_this.data(''func_count'', i+1);
});
}
$(''$showmenu'').toggleFuncs(
function() {
$( ".menu" ).toggle( "drop" );
},
function() {
$( ".menu" ).toggle( "drop" );
}
);
</script>
La primera función es una alternativa a JQuery obsoleto alternar :). Funciona bien con JQuery 2.0.3 y JQuery UI 1.10.3
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click-header").click(function(){
$(this).next(".hidden-content").slideToggle("slow");
$(this).toggleClass("expanded-header");
});
});
</script>
.demo-container {
margin:0 auto;
width: 600px;
text-align:center;
}
.click-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
display:none;
border: 1px solid #d7dbd8;
padding: 20px;
text-align: center;
}
<div class="demo-container">
<div class="click-header"> </div>
<div class="hidden-content">Lorem Ipsum.</div>
</div>