jquery تنزلق صعودا وهبوطا ماذا أفعل؟

StackOverflow https://stackoverflow.com/questions/1239798

  •  11-09-2019
  •  | 
  •  

سؤال

أنا لست على دراية jQuery بحيث تكون هناك موضع تقدير أي مساعدة، لدي بعض الكود، (غير قادر على تذكر أين أنت) يعرض جزءا من المحتوى ثم يسمح لك بإظهار المزيد أو أقل.

ما أرغب في فعل التعليمات البرمجية هو بالضبط ما يفعله الآن، ولكن بدلا من إظهار / إخفاء فقط، أريد أن ينزلق إلى أسفل وما فوق الكشف عن محتوى أكثر أو أقل.

الكود كله

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show more less</title>

<style media="screen" type="text/css">
#mytext {width:260px;height:200px;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
var adjustheight = 200;
$("#adjust").toggle(function() {
$('#mytext').css('height', 'auto').css('overflow', 'visible');
$(this).text("less");
}, function() {
$('#mytext').css('height', adjustheight).css('overflow', 'hidden');
$(this).text("more");
});
});
</script>

</head>

<body>

<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div>
<a href="#" id="adjust">more</a>

</body>
</html>

التي تسيطر عليها حاليا عن طريق تغيير الارتفاع في CSS أي طريقة لتحريك هذا؟ شكرا

هل كانت مفيدة؟

المحلول 3

هيريس طريقة رائعة لتحقيق ما كنت أرغب في تحقيقه. من خلال عرض كمية معينة من النص في الأعلى في حرف واحد وقادرة على إظهار وإخفاء النصف الآخر من النص مع تأثير الشريحة.

http://sim.plied.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

نصائح أخرى

هل ألقيت نظرة على slidetoggle. طريقة؟

// Open & Close myDiv.  Animation take 1 second (1000 ms)
$('#myDiv').slideToggle(1000);

يحرر: إليك إجابة أفضل.

في HTML الخاص بك، لديك DIV للأشياء التي تريد دائما رؤيتها، والحب آخر للأشياء المخفية.

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info that you don't always care about</div>

بهذه الطريقة يمكنك تبديل فقط sometimesShow. وبعد ليس بالضبط ما طلبته، لكنني أعتقد أنه سيحل مشكلتك.

نوع من إجابة مات، إليك HTML:

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info.</div>

jQuery الخاص بك يجب أن تبدو مثل هذا:

<script type="text/javascript">
    $(document).ready(function() {
        $("#adjust").toggle(function() {
            $("#sometimesShow").slideDown("fast");
            $(this).text("Less...");
        }, function () {
            $("#sometimesShow").slideUp("fast");
            $(this).text("More...");                
        });
    });
</script>

هذا هو رمز بسيط من شأنه أن يساعد ..

مجرد نسخ التعليمات البرمجية داخل علامة البرنامج النصي

 $(document).ready(function() {
            $('#buttontag').click(function(){
                //alert("Here I am ..");
                $('#mytext').slideToggle("fast");
            });
        });

أضف هذا داخل علامة الجسم ..

<button id="buttontag"> Slide it .. </button>

هذا من شأنه بالتأكيد العمل .. ولكن عليك تضمين ملف jquery ..

http://code.jquery.com/jquery-1.9.1.min.js.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top