web-dev-qa-db-ja.com

JQueryはマウスクリックでdivを表示および非表示（アニメーション）

これは私の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>

そして、.menuをクリックして#showmenuを左から右にスライドさせて表示します（アニメーション付き）。 #showmenuまたはサイトページの任意の場所を再度クリックすると、.menuが非表示になります（左に戻る）。

JQuery 2.0.3を使用します

私はこれを試しましたが、私が望むことをしません。

$(document).ready(function() {
    $('#showmenu').toggle(
        function() {
            $('.menu').slideDown("fast");
        },
        function() {
            $('.menu').slideUp("fast");
        }
    );
});
javascriptjqueryjquery-uijquery-effects
30
MM PP

.toggle() method は、バージョン1.9のjQueryからremovedでした。代わりにこれを行うことができます：

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

デモ： http://jsfiddle.net/APA2S/1/

...しかし、上下にスライドする質問のコードと同様に。左または右にスライドするには、次の操作を実行できます。

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

デモ： http://jsfiddle.net/APA2S/2/

これには jQuery-UIのスライド効果 が必要ですが、質問にそのタグを追加したので、それで問題ないと思います。

62
nnnnnn

もちろんslideDownとslideUpはあなたが望むことをしないでください。あなたはそれをトップ/ダウンではなく、左/右にしたいと言いました。

jquery-uiタグを追加して質問を編集してjQuery UIを使用していることを意味する場合、jQuery UIのslide効果を使用して nnnnnn's solution を選択します。

そうでない場合：

メニューが表示されると仮定すると（編集：おっと、これは有効な仮定ではないことがわかります;以下の注を参照してください）、スライドさせたい場合左に出てから、左から後ろにスライドして戻ることができます。 Live Example | ライブソース

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

メニュー要素にposition: relativeを配置する必要があります。

toggleの形式はjQueryから削除されたため、clickをtoggleに置き換えたことに注意してください。

メニューを非表示にする場合は、上記を調整できます。基本的に、ページ外に配置するときに、要素の幅を知りたい。

このバージョンでは、メニューが最初に表示されているかどうかは関係ありません。 Live Copy | ライブソース

<!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>
13
T.J. Crowder

私はこのようなことをします

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>

そしてjQueryでは

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

これを試して：

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

最初の機能は、JQuery非推奨のトグルに代わるものです:)。 JQuery 2.0.3およびJQuery UI 1.10.3で正常に動作します

0
John Doe