it-swarm.dev

مسج إظهار وإخفاء 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");
        }
    );
});
30
MM PP

هذا .toggle() method كان تمت إزالته من 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 ، لكنك أضفت هذه العلامة إلى سؤالك ، لذا فأنا أفترض أن ذلك على ما يرام.

62
nnnnnn

بالطبع لا تفعل slideDown و slideUp ما تريد ، قلت إنك تريد أن تكون يسارًا/يمينًا ، وليس أعلى/أسفل.

إذا كان لديك تحرير لسؤالك إضافة jquery-ui تعني العلامة أنك تستخدم jQuery UI ، سأذهب مع حل nnnnnn ، باستخدام تأثير jQuery UI slide.

ان لم:

على افتراض أن القائمة ستبدو مرئية (تحرير: عفوًا ، أرى أن هذا ليس افتراضًا صالحًا ؛ انظر الملاحظة أدناه) ، إذا كنت تريد أن تنزلق إلى اليسار ثم العودة لاحقًا من اليسار ، يمكنك القيام بذلك: مثال حي | المصدر لايف

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

وفي مسج بسيطة مثل

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>

أول fuction هو بديل ل JQuery إهمال تبديل :). يعمل بشكل جيد مع JQuery 2.0.3 و JQuery UI 1.10.3

0
John Doe