Soru Javascript kullanarak bir
nasıl genişleyebilir ve daraltabilirim?


Sitemde bir liste oluşturdum. Bu liste, veritabanımdaki bilgilerle oluşturulan bir foreach döngüsü tarafından oluşturulur. Her madde farklı bölümleri olan bir kapsayıcıdır, bu yüzden 1, 2, 3 ... gibi bir liste değildir. Bilgi içeren bölümleri tekrarlıyorum. 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."

Kullanmaya çalıştığım div varsayılan olarak style = "display: none", ve javascript'i tıklatarak görünür hale getirmek istiyorum.

"$ (This) .find ('legend'). İnnerHTML", bu durumda, işlevde bir argüman olarak "Genişlet" denemeye ç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";
            }
    }

Neredeyse% 100 eminim ki problemim sözdizimi ve javascript'in nasıl çalıştığına dair pek bir fikrim yok.

Belgeyle bağlantılı jQuery'im var:

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

İçinde <head></head> Bölüm.


76
2017-07-04 00:18


Menşei


Bence elde etmeye çalıştığın şey bir akordeon. jqueryui.com/accordion - Marc
$this - Bu nereden geliyor? - krishgopinath
$ bu, fonksiyonun içinde tetiklendiği HTML elemanına "bağlı" demeye çalışıyorum. - Ryan Mortensen
@hungerpain - Ben jQuery için yeni olabilir ve sadece etrafında parantezi unuttum düşünüyorum $(this). Bu yardımcı olur umarım. - jmort253
İlk önce jQuery hakkında daha fazla çalışman gerektiğini düşünüyorum. Görünüşe göre jQuery ve JavaScript arasındaki fark hakkında fazla bir şey bilmiyorsunuz - tom10271


Cevaplar:


Tamam, burada iki seçeneğin var:

  1. JQuery UI akordeon kullanın - güzel, kolay ve hızlı. Daha fazla bilgi gör İşte
  2. Ya da hala bunu kendi başına yapmak istiyorsan, fieldset (bunun için zaten kullanmak için semantik olarak doğru değildir) ve kendiniz bir yapı yaratın.

İşte bunu nasıl yapıyorsun? 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 gizlemek için .content sayfa yüklendiğinde

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

Sonra jQuery kullanarak bir click başlık için olay.

$(".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/


152
2017-07-04 00:42



Bu durumda +1, sayfada birden fazla DIV öğesi varsa sorunu çözecektir. Başka bir deyişle, tıklanan başlık içerisindeki içeriği hedeflediğiniz için, bu ölçek iyi ölçeklendirilir. - jmort253
Tarla zorunlu değildir. Ondan kurtulacağım ve sadece bir sınır kullanacağım. Bu mükemmel çünkü tıklattığım üstbilgiye göre genişletmek için div seçiyor, bu da önemli olan, kullanıcı ayarlarına ve diğer etkenlere bağlı olarak birkaç farklı listelenen öğeye sahip olduğum gerçeğinden dolayı önemlidir. - Ryan Mortensen
@Unipartisandev şuna bakın: jsfiddle.net/hungerpain/476Nq tam teşekküllü örnek :) - krishgopinath
Yardımı gerçekten takdir ediyorum. Bu özel bir şeyin daha çok bir ya da hiçbir şey gösterilmeyen bir örnek olmasına rağmen, bir akordeon kullanmaya gerek olmadığı şüphesiz, sitenin başka bölümleri olacaktır. Hala sorun yaşıyorum. Benim jQuery güncel değildi ve yükleniyor. Bu düzeltildi, ama hala işe yaramıyor. Şimdi güzel bir saat geçirdim, üzerinde uyuyacağım. Belki yarın bana vuracak. - Ryan Mortensen
Harika, teşekkürler. Çok zaman kaydedildi! - Basil Musa


nasıl hakkında:

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>

Keman

Bu şekilde tıklama etkinliğini .majorpoints sınıf ve her seferinde HTML'de yazmak zorunda değilsiniz.


17
2017-07-04 00:25



nasıl olacak closest burada çalış? - krishgopinath
Merhaba raam86, bunu bir adım daha ileri götürürdüm ve bir kimlik yerine bir sınıf kullanarak div üzerinde .find yapardım. Eğer hakemin sayfada bu alanların birkaçı varsa, tıklatılan belirli bir alanla ilgili olanın hiderini hedeflemek isteyecektir. Bu yardımcı olur umarım! :) Örneğin, ebeveyne bir başvuru almak için .closest'i kullanabilir, daha sonra div'i bir class = "hider" ile bulmak için .find'i kullanabilirsiniz. - jmort253
3 am olduğunu biliyorum;), ama jsFiddle'ınızda hala id’leri kullandığınızı fark ettim. Bu, W3C spesifikasyonunun her bir kimliğin benzersiz olması gerektiğinden, tanımlanmamış davranışlarla sonuçlanabilir. Hideri bir sınıfa değiştirirseniz, bu, diğer tarayıcılarda böceklere veya açıklanamayan davranışlara karşı daha bağışıklık kazanır. Bu yardımcı olur umarım! - jmort253
Aslında $ ('majorpointslegend') olmalıdır. click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); VEYA tarla kümesindeki herhangi bir yer tıklandığında, daraltılır. - Awatatah


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

İlk yol, jQuery'yi kullanarak toggle yöntem:

<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 jQuery'yi kullanmaktır show yöntem:

<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 kullanmaktır slideToggle Bazı etkilere izin veren jQuery yöntemi. Gibi $('#showMe').slideToggle('slow'); yavaşça gizli div gösterecektir.


6
2017-07-04 00:33



Sayfada bu showMe elemanlarından birden fazlasına sahip olduğunu varsayalım? Unutmayın, bunların bir listesini oluşturmak için bir for döngüsü kullanıyor, dolayısıyla hedefleme sınıfı = "showMe" sadece bu öğenin ilk örneğini etkilerdi. Benim önerim, showMe öğesini tıklatılanla ilgili olarak göndermektir. Sonra bu iyi bir çözüm olurdu. Bu yardımcı olur umarım! :) - jmort253
Doğru, ama listeyi bir dizi oluşturmak için döngü kullanıyor <li> elementler, div değil. Her iki şekilde de, daha sonra onu saklamak için eleman kimliğini kullanabilir. - Mike Hawkins
Alt bölümleri düşünüyorsunuz ve bunlardan daha fazlasının olacağını unutuyorsunuz. Her Bölüm li öğelerle doldurulur altbölüm. "Bu liste, veritabanımdaki bilgilerle oluşturulan bir foreach döngüsü tarafından oluşturulmuştur. Her öğe farklı bölümleri olan bir kapsayıcıdır, bu yüzden 1, 2, 3 ... gibi bir liste değildir. Bilgi içeren bölümleri tekrarlıyorum Her bölümde bir alt bölüm var. " Kısacası, sadece bir bölüm gösterdi, daha fazla olsa bile. - jmort253


Burada birçok problem var

Senin için çalışan bir keman kurdum: http://jsfiddle.net/w9kSU/

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

6
2017-07-04 00:28





jquery'yi dene

  <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
2017-07-04 00:34





Bir panel / div genişletme veya daraltma yapmak 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 iletebilir ve ekran 'none' veya 'block' arasında geçiş yapar.

Orijinal kaynak snip2code - Html'de bir div nasıl daraltılır


3
2018-01-11 10:11





Burada benim animasyon örneğim bir 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>

Keman


3
2018-05-20 18:16





Şuna baksana toggle()  jQuery işlevi:

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

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


3
2017-07-04 00:28



Merhaba, Stack Overflow'a hoş geldiniz! Bir örnek göstermelisiniz, böylece cevabınız daha eksiksiz. Bağlantı kopacak olursa, cevabınız gelecekteki ziyaretçiler için hala yararlı olacaktır. İyi şanslar! :) - jmort253
Bir örnek eklemek veya bunu yorum olarak eklemek için düzenleyebilir misiniz? Teşekkürler. - JGallardo


Sayfada jQuery bulunduğundan bunu kaldırabilirsiniz. onclicköznitelik ve majorpointsexpand işlevi. Aşağıdaki komut dosyasını sayfanı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ümler, HTML'nizle olduğu gibi çalışacaktır, ancak gerçekten çok güçlü bir cevap değildir. Eğer değiştirirsen fieldset düzeni, onu kırabilir. Koymanı öneririm class Bu gizli div içindeki öznitelik gibi class="majorpointsdetail" ve bu kodu yerine kullan:

$(function(){

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

});

Obs: kapanış yok </fieldset> sorgunuzda etiketlemek için gizli divın tarlada olduğunu varsayardım.


2
2017-07-04 00:41



Sen haklısın Kapanış alanı var, ama sorumu kaçırdım. Kapanış içten hemen sonra </ div> ve kapama dışından önce gelir </ div> - Ryan Mortensen


Veri rolünü katlanabilir olarak ör.

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

sonra genişletilmiş div kapanacak

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

1
2017-08-29 10:00