JQuery zeigen und verbergen div auf Mausklick (Animation)

Das ist mein HTML-Code:JQuery zeigen und verbergen div auf Mausklick (Animation)

<div id="showmenu">Click Here</div> 
<div class="menu" style="display: none;"> 
    <ul> 
     <li>Button1</li> 
     <li>Button2</li> 
     <li>Button3</li> 
    </ul> 
</div>

Und ich möchte auf #showmenu.menu auf Klick um zu zeigen, von links nach rechts (mit Animation) schieben. Klicken Sie erneut auf #showmenu oder irgendwo auf der Website-Seite, .menu wird ausblenden (zurück nach links schieben).

Ich benutze JQuery 2.0.3

Ich habe dies versucht, aber es tut nicht, was ich will.

$(document).ready(function() { 
    $('#showmenu').toggle(
     function() { 
      $('.menu').slideDown("fast"); 
     }, 
     function() { 
      $('.menu').slideUp("fast"); 
     } 
    ); 
});

Quelle

2013-07-14 MM PP

Okay, also warum -1? –

Wenn meine Frage schlecht ist, bitte helfen Sie mir, es zu verbessern –

Ich denke, die -1 ist für nicht setzen, was Sie hier versucht .. – krishgopinath

Das .toggle() method war von jQuery in Version 1.9 entfernt. Sie können dies tun, anstatt:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
      $('.menu').slideToggle("fast"); 
    }); 
});

Demo: http://jsfiddle.net/APA2S/1/

... aber wie mit dem Code in Ihrer Frage, oder nach unten würde nach oben schieben. Gleiten links oder rechts können Sie folgendes tun:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
     $('.menu').toggle("slide"); 
    }); 
});

Demo: http://jsfiddle.net/APA2S/2/

Anbetracht dessen, dass diese jQuery-UI's slide effect erfordert, aber sie fügte hinzu, dass Tag auf Ihre Frage so gehe ich davon aus, dass in Ordnung ist.

Quelle

2013-07-14 11:46:25 nnnnnn

Danke, aber wie ich in meiner Frage gesagt habe, möchte ich Folie links verwenden. –

Ja, ich habe gerade diesen Teil hinzugefügt. – nnnnnn

-1 "back-to-left" ist nicht Slide rauf und runter – balexandre

Natürlich slideDown und slideUp nicht tun, was Sie wollen, Sie sagten, Sie wollen, dass es nach unten nicht/links/rechts werden, oben.

Wenn deine Bearbeitung auf Ihre Frage Hinzufügen der jquery-ui Tag bedeutet, dass Sie jQuery UI verwenden, würde ich mit nnnnnn's solution gehen, slide Effekt jQuery UI verwenden.

Falls nicht:

das Menü Unter der Annahme beginnt sichtbar (edit: oops, ich sehe, dass keine gültige Annahme ist, siehe Hinweis unten), wenn Sie es wollen nach links verschieben und dann später von links wieder reinschieben, könntest du das tun: Live Example | Live Source

$(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}); 
     } 
    }); 
});

Sie werden position: relative auf dem Menüelement setzen müssen.

Beachten Sie, dass ich Ihre toggle durch click ersetzt, da diese Form von toggle aus jQuery entfernt wurde.

Wenn Sie wollen, dass das Menü ausgeblendet wird, können Sie das oben einstellen. Sie möchten die Breite des Elements im Grunde wissen, wenn Sie es von der Seite weglegen.

Diese Version kümmert sich nicht, ob das Menü anfänglich sichtbar ist oder nicht: Live Copy | Live Source

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

Quelle

2013-07-14 11:45:40

ich tun würde, so etwas wie diese

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

und in jQuery so einfach wie

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 

    }); 
});

Quelle

2013-07-14 11:51:46 balexandre

<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">&nbsp;</div> 
    <div class="hidden-content">Lorem Ipsum.</div> 
</div>

Quelle

2014-03-19 02:25:35

Try this:

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

Erste fuction ist eine Alternative zu JQuery Toggle veraltet :). Funktioniert gut mit JQuery 2.0.3 und JQuery UI 1.10.3

Quelle

2015-06-19 07:24:30

JQuery zeigen und verbergen div auf Mausklick (Animation)

Antwort

Verwandte Themen