it-swarm.com.ru

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");
        }
    );
});
28
MM PP

Этот метод .toggle() был удален из jQuery в версии 1.9. Вы можете сделать это вместо этого:

$(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 , но вы добавили этот тег в свой вопрос, поэтому я предполагаю, что все в порядке.

61
nnnnnn

Конечно, slideDown и slideUp не делают то, что вы хотите, вы сказали, что хотите, чтобы оно было слева/справа, а не сверху/снизу.

Если ваше изменение в вопросе с добавлением тега jquery-ui означает, что вы используете пользовательский интерфейс jQuery, я бы пошел с решением nnnnnn , используя эффект slide пользовательского интерфейса jQuery.

Если не:

Предполагая, что меню начинает отображаться (edit: упс, я вижу, что это недопустимое предположение; см. Примечание ниже), если вы хотите, чтобы оно выдвигалось влево, а затем снова сдвигалось назад слева, Вы можете сделать это: 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 на click, потому что эта форма toggle была удалена из jQuery.


Если вы хотите, чтобы меню начиналось скрытно, вы можете настроить выше. Вы хотите знать ширину элемента, в основном, при выводе его за пределы страницы.

Эта версия не заботится о том, является ли меню изначально видимым или нет: 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>
12
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