it-swarm.dev

كيف يمكنني توسيع وطي <div> باستخدام javascript؟

لقد قمت بإنشاء قائمة على موقعي. يتم إنشاء هذه القائمة من خلال حلقة foreach التي تبني بمعلومات من قاعدة البيانات الخاصة بي. كل عنصر عبارة عن حاوية بها أقسام مختلفة ، لذا فهي ليست قائمة مثل 1 ، 2 ، 3 ... إلخ. أدرج الأقسام المتكررة مع المعلومات. في كل قسم ، هناك قسم فرعي. الإنشاء العام كالتالي:

<div>
    <fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
    <legend class="majorpointslegend">Expand</legend>
    <div style="display:none" >
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

لذلك ، أحاول استدعاء دالة باستخدام onclick = "majorpointsexpand ($ (هذا) .find ('legend'). innerHTML)"

Div الذي أحاول معالجته هو style = "display: none" افتراضيًا ، وأريد استخدام javascript لجعله مرئيًا عند النقر.

يحاول "$ (هذا) .find ('وسيلة إيضاح'). innerHTML" تمرير ، في هذه الحالة ، "توسيع" كوسيطة في الدالة.

هنا هو جافا سكريبت:

function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                document.write.$(this).find('div').style = "display:inherit";
                document.write.$(this).find('legend').innerHTML = "Collapse";
            }
        else
            {
                document.write.$(this).find('div').style = "display:none";
                document.write.$(this).find('legend').innerHTML = "Expand";
            }
    }

أنا متأكد بنسبة 100٪ تقريبًا من أن مشكلتي هي بناء الجملة ، وليس لدي الكثير من المعرفة حول كيفية عمل جافا سكريبت.

لدي jQuery مرتبط بالمستند بـ:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

في قسم <head></head>.

81
Ryan Mortensen

حسنًا ، إذن لديك خياران هنا:

  1. استخدم الأكورديون الخاص بـ jQuery UI - إنه لطيف وسهل وسريع. رؤية المزيد من المعلومات هنا
  2. أو ، إذا كنت لا تزال ترغب في القيام بذلك بنفسك ، فيمكنك إزالة fieldset (ليس من المنطقي استخدامه لهذا الغرض على أي حال) وإنشاء بنية بنفسك.

إليك كيف تفعل ذلك. أنشئ بنية HTML مثل هذا:

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

باستخدام CSS: (هذا لإخفاء العناصر .content عند تحميل الصفحة.

.container .content {
    display: none;
    padding : 5px;
}

ثم ، باستخدام jQuery ، اكتب حدث click للرأس.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

إليك عرض توضيحي: http://jsfiddle.net/hungerpain/eK8X5/7/

166
krishgopinath

كيف حول:

مسج:

$('.majorpoints').click(function(){
    $(this).find('.hider').toggle();
});

HTML

<div>
  <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hider" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div>

Fiddle

وبهذه الطريقة تقوم بربط حدث النقر بفئة .majorpoints والتي لا يتعين عليك كتابتها في HTML في كل مرة.

18
raam86

العديد من المشاكل هنا

لقد قمت بإعداد كمان مناسب لك: http://jsfiddle.net/w9kSU/

$('.majorpointslegend').click(function(){
    if($(this).text()=='Expand'){
        $('#mylist').show();
        $(this).text('Colapse');
    }else{
        $('#mylist').hide();
        $(this).text('Expand');
    }
});
6
David Lin

لذا ، أولاً وقبل كل شيء ، لا يستخدم جافا سكريبت الخاص بك jQuery. هناك عدة طرق للقيام بذلك. فمثلا:

الطريقة الأولى ، باستخدام طريقة jQuery toggle:

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>  
    $('.expandContent').click(function(){
        $('.showMe').toggle();
    });
</script>

jsFiddle: http://jsfiddle.net/pM3DF/

هناك طريقة أخرى هي ببساطة استخدام طريقة jQuery show:

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>
    $('.expandContent').click(function(){
        $('.showMe').show();
    });
</script>

jsFiddle: http://jsfiddle.net/Q2wfM/

مع ذلك ، هناك طريقة ثالثة تتمثل في استخدام الأسلوب slideToggle من jQuery والذي يسمح ببعض التأثيرات. مثل $('#showMe').slideToggle('slow'); والتي ستعرض ببطء div المخفية.

6
Mike Hawkins

قد ترغب في إلقاء نظرة على طريقة جافا سكريبت البسيطة هذه التي يمكن التذرع بها عند النقر على رابط لجعل لوحة/div قابلة للتوسيع أو الانهيار.

<script language="javascript"> 
function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
} 
</script>

يمكنك تمرير معرف div وسيتم التبديل بين العرض "بلا" أو "حظر".

المصدر الأصلي on snip2code - كيفية طي div في html

5
Mike Scattoni

هنا يوجد مثال عن الرسوم المتحركة وهو قائمة الموظفين مع توسيع وصف.

<html>
  <head>
    <style>
      .staff {            margin:10px 0;}
      .staff-block{       float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
      .staff-title{       font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
      .staff-name {       font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
      .staff-name:hover { background-color: silver !important; cursor: pointer;}
      .staff-section {    display:inline-block; padding-left: 10px;}
      .staff-desc {       font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
      .staff-desc p {     text-align: justify; margin-top: 5px;}
      .staff-desc img {   margin: 5px 10px 5px 5px; float:left; height: 185px; }
    </style>
  </head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
  <div class="staff-block">
    <div  class="staff-title">Staff</div>
    <div class="staff-section">
        <div class="staff-name">Maria Beavis</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
        </div>
        <div class="staff-name">Diana Smitt</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
        </div>
        <div class="staff-name">Mike Ford</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
        </div>
    </div>
  </div>

  <div class="staff-block">
    <div  class="staff-title">Technical Advisors</div>
    <div class="staff-section">
        <div class="staff-name">TA Elvira Bett</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
        </div>
        <div class="staff-name">TA Sonya Rosman</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
        </div>
        <div class="staff-name">TA Tim Herson</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father&#8217;s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
        </div>
    </div>
  </div>
</div>
<!-- STOP STAFF SECTION -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
    $(this).toggleClass('hover');
});
var lastItem;
    $('.staff-name').click(function(currentItem) {
        var currentItem = $(this);
      if ($(this).next().height() == 0) {
          $(lastItem).css({'font-weight':'normal'});
          $(lastItem).next().animate({height: '0px'},400,'swing');
          $(this).css({'font-weight':'bold'});
          $(this).next().animate({height: '300px',opacity: 1},400,'swing');
      } else {
          $(this).css({'font-weight':'normal'});
          $(this).next().animate({height: '0px',opacity: 1},400,'swing');
      }
      lastItem = $(this);
    });
//]]>
--></script>

</body></html>

Fiddle

3
Intacto

ألقِ نظرة على toggle() jQuery function:

http://api.jquery.com/toggle/

أيضًا ، innerHTML jQuery الدالة هي .html().

3
isThisLove

حاول مسج ،

  <div>
        <a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
        <legend class="majorpointslegend">Expand</legend>
        <div id="data" style="display:none" >
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                $('#data').css("display","inherit");
                $(".majorpointslegend").html("Collapse");
            }
        else
            {
                $('#data').css("display","none");
                $(".majorpointslegend").html("Expand");
            }
    }
3
anand kumar

نظرًا لأن لديك jQuery على الصفحة ، يمكنك إزالة هذه السمة onclick والدالة majorpointsexpand. أضف البرنامج النصي التالي إلى أسفل صفحتك أو ، على نحو أفضل ، إلى ملف .js خارجي:

$(function(){

  $('.majorpointslegend').click(function(){
    $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

يجب أن تعمل هذه الحلول مع HTML كما هي ولكنها ليست في الحقيقة إجابة قوية للغاية. إذا قمت بتغيير تخطيطك fieldset ، فقد يؤدي ذلك إلى كسره. أقترح أن تضع سمة class في هذا div المخفي ، مثل class="majorpointsdetail" وأن تستخدم هذا الرمز بدلاً من ذلك:

$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

ملاحظة: لا توجد علامة </fieldset> مغلقة في سؤالك ، لذا فأنا أفترض أن div div موجودة داخل مجموعة الحقول.

2
sergiopereira

تحقق من Jed Fosterer Readmore.js library.

الاستخدام بسيط مثل:

$(document).ready(function() {
  $('article').readmore({collapsedHeight: 100});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>

<article>
  <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and Explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>

  <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>

فيما يلي الخيارات المتاحة لتهيئة التطبيق المصغّر الخاص بك:

{
  speed: 100,
  collapsedHeight: 200,
  heightMargin: 16,
  moreLink: '<a href="#">Read More</a>',
  lessLink: '<a href="#">Close</a>',
  embedCSS: true,
  blockCSS: 'display: block; width: 100%;',
  startOpen: false,

  // callbacks
  blockProcessed: function() {},
  beforeToggle: function() {},
  afterToggle: function() {}
},

استخدام يمكن استخدامه مثل:

$('article').readmore({
  collapsedHeight: 100,
  moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});

اتمني ان يكون مفيدا.

1
Heitor Althmann

إذا كنت تستخدم دور البيانات القابل للطي ، على سبيل المثال.

    <div id="selector" data-role="collapsible" data-collapsed="true">
    html......
    </div>

ثم سيتم إغلاق div الموسع

    $("#selector").collapsible().collapsible("collapse");   
1
Atif Hussain