Javascript kullanarak bir <div> öğesini nasıl genişletebilir ve daraltabilirim?

Question 1

Sitemde bir liste oluşturdum. Bu liste, veritabanımdaki bilgilerle oluşturulan bir foreach döngüsü tarafından oluşturulur. Her öğe farklı bölümleri olan bir konteynerdir, bu nedenle bu 1, 2, 3 ... vb gibi bir liste değildir. Tekrar eden bölümleri bilgilerle listeliyorum. Her bölümde bir alt bölüm var. Genel yapı aşağıdaki gibidir:

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

Bu yüzden onclick = "majorpointsexpand ($ (this) .find ('legend'). İnnerHTML)" ile bir işlevi çağırmaya çalışıyorum.

Değiştirmeye çalıştığım div varsayılan olarak style = "display: none" ve tıklamada görünür kılmak için javascript kullanmak istiyorum.

"$ (This) .find ('legend"). İnnerHTML ", bu durumda fonksiyonda bir argüman olarak" Expand "geçirmeye çalışıyor.

İşte javascript:

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";
            }
    }

Sorunumun sözdizimi olduğundan neredeyse% 100 eminim ve javascript'in nasıl çalıştığı konusunda pek bir fikrim yok.

Belgeye jQuery bağlandı:

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

In <head></head>bölümünde.

Question 2

Tamam, burada iki seçeneğiniz var:

JQuery kullanıcı arayüzünün akordeonunu kullanın - güzel, kolay ve hızlı. Burada daha fazla bilgi görün
Ya da, bunu yine de kendiniz yapmak istiyorsanız, bunu kaldırabilir fieldset(zaten bunun için kullanmak anlamsal olarak doğru değildir) ve kendi başınıza bir yapı oluşturabilirsiniz.

İşte bunu nasıl yapacağınız. Bunun gibi bir HTML yapısı oluşturun:

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

Bu CSS ile: (Bu, .contentsayfa yüklendiğinde öğeleri gizlemek içindir .

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

Ardından, jQuery kullanarak clickbaşlık için bir olay yazın.

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

});

İşte bir demo: http://jsfiddle.net/hungerpain/eK8X5/7/

Question 3

ne dersin:

jQuery:

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

Vaktini boşa harcamak

Bu şekilde, tıklama olayını .majorpointssınıfa bağlarsınız ve her seferinde bunu HTML'ye yazmanız gerekmez.

Question 4

Yani, her şeyden önce, Javascript'iniz jQuery bile kullanmıyor. Bunu yapmanın birkaç yolu var. Örneğin:

İlk yol, jQuery toggleyöntemini kullanarak :

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

Başka bir yol da jQuery showyöntemini kullanmaktır :

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

Yine de üçüncü bir yol, slideTogglebazı etkilere izin veren jQuery yöntemini kullanmaktır . Mesela $('#showMe').slideToggle('slow');hangi yavaşça gizli div gösterecektir.

Question 5

Bir panel / div'i genişletmek veya daraltmak için bir bağlantıya tıklandığında çağrılacak bu basit Javascript yöntemine bir göz atmak isteyebilirsiniz.

<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 kimliğini iletebilirsiniz ve "yok" veya "engelle" arasında geçiş yapacaktır.

Orijinal kaynak snip2code - Nasıl html bir div daraltmak için

Question 6

Burada birçok sorun var

Sizin için çalışan bir keman oluşturdum: http://jsfiddle.net/w9kSU/

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

Question 7

jquery deneyin,

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

Question 8

Burada animasyon örneğim, açıklamayı genişleten bir personel listesi var.

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

Vaktini boşa harcamak

Question 9

toggle() JQuery işlevine bir göz atın :

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

Ayrıca, innerHTML jQuery İşlevi .html().

Question 10

Sayfada jQuery bulunduğundan, bu onclicközniteliği ve majorpointsexpandişlevi kaldırabilirsiniz . Aşağıdaki komut dosyasını sayfanızın altına veya tercihen harici bir .js dosyasına ekleyin:

$(function(){

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

});

Bu çözüm HTML'nizle olduğu gibi çalışmalıdır, ancak gerçekten çok sağlam bir yanıt değildir. fieldsetDüzeninizi değiştirirseniz, bozulabilir. classBu gizli div'e bir öznitelik class="majorpointsdetail"eklemenizi ve bunun yerine şu kodu kullanmanızı öneririm :

$(function(){

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

});

Obs: Sorunuzda kapanış </fieldset>etiketi yok , bu yüzden gizli div'in alan kümesinin içinde olduğunu varsayıyorum.

Question 11

Veri rolünü daraltılabilir kullandıysanız, ör.

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

sonra genişletilmiş div'i kapatır

    $("#selector").collapsible().collapsible("collapse");

Question 12

Jed Foster'ın Readmore.js'sine göz atın kitaplığına .

Kullanımı şu kadar basit:

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

Snippet'i genişlet

Widget'ınızı yapılandırmak için kullanabileceğiniz seçenekler şunlardır:

{
  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() {}
},

Snippet'i genişlet

Kullanım şu şekilde kullanabilir:

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

Snippet'i genişlet

Umut ediyorum bu yardım eder.