wake-up-neo.net

JQuery div auf Mausklick anzeigen und ausblenden (animieren)

Dies ist mein HTML-Code:

<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 .menu anzeigen, indem Sie auf #showmenu von links nach rechts (mit animieren) klicken. Beim erneuten Klicken auf #showmenu oder an einer beliebigen Stelle der Site-Seite wird .menu ausgeblendet (nach links schieben).

Ich benutze JQuery 2.0.3

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

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

Diese .toggle()-Methode war entfernt aus jQuery in Version 1.9. Sie können dies stattdessen tun:

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

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

... aber wie mit dem Code in Ihrer Frage, der nach oben oder unten rutschen würde. Um nach links oder rechts zu schieben, können Sie Folgendes tun:

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

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

Beachten Sie, dass dies den Folieneffekt von jQuery-UI erfordert , aber Sie haben dieses Tag zu Ihrer Frage hinzugefügt. Ich gehe davon aus, dass dies in Ordnung ist.

61
nnnnnn

Natürlich machen slideDown und slideUp nicht das, was Sie wollen, Sie sagten, Sie möchten, dass es links/rechts und nicht oben/unten ist.

Wenn Ihre Bearbeitung zu Ihrer Frage durch Hinzufügen des jquery-ui-Tags bedeutet, dass Sie die jQuery-Benutzeroberfläche verwenden, würde ich die Lösung von nnnnnn verwenden und den slide-Effekt der jQuery-Benutzeroberfläche verwenden.

Wenn nicht:

Angenommen, das Menü beginnt sichtbar (edit: oops, ich sehe, dass dies keine gültige Annahme ist; siehe Hinweis unten), wenn Sie möchten, dass es nach links und dann von links nach hinten verschoben wird. Sie könnten dies 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 müssen position: relative in das Menüelement einfügen.

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


Wenn Sie möchten, dass das Menü ausgeblendet wird, können Sie die obigen Einstellungen anpassen. Sie möchten die Breite des Elements im Grunde wissen, wenn Sie es off-page setzen.

Bei dieser Version ist es egal, 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>
12
T.J. Crowder

Ich würde so etwas tun

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

  });
});
2
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>
0
Porta Shqipe

Versuche dies:

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

Die erste Funktion ist eine Alternative zu JQuery, der nicht mehr verwendet werden kann :). Funktioniert gut mit JQuery 2.0.3 und JQuery UI 1.10.3

0
John Doe