Pytanie Jak mogę rozwinąć i zwinąć
używając javascript?


Stworzyłem listę na mojej stronie. Ta lista jest tworzona przez pętlę foreach, która kompiluje się z informacjami z mojej bazy danych. Każdy element jest kontenerem z różnymi sekcjami, więc nie jest to lista taka jak 1, 2, 3 ... itd. Zamawiam powtarzające się sekcje z informacjami. W każdej sekcji znajduje się podsekcja. Ogólna kompilacja jest następująca:

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

Tak, próbuję wywołać funkcję z onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"

Element div, który próbuję modyfikować, domyślnie jest stylem = "display: none", a ja chcę użyć javascript, aby był widoczny po kliknięciu.

"$ (This) .find ('legend'). InnerHTML" próbuje przekazać, w tym przypadku, "Expand" jako argument w funkcji.

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

Jestem prawie w 100% pewien, że moim problemem jest składnia i nie mam zbyt wiele pojęcia na temat działania javascript.

Mam jQuery połączone z dokumentem z:

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

w <head></head> Sekcja.


76
2017-07-04 00:18


pochodzenie


Myślę, że to, co próbujesz osiągnąć, to akordeon jqueryui.com/accordion - Marc
$this - Skąd to pochodzi? - krishgopinath
$ to ja próbuję powiedzieć "w stosunku do" elementu HTML, w którym funkcja jest wyzwalana wewnątrz. - Ryan Mortensen
@hungerpain - Myślę, że pytający może być nowy w jQuery i po prostu zapomniał o nawiasie $(this). Mam nadzieję że to pomoże. - jmort253
Myślę, że powinieneś najpierw dowiedzieć się więcej o jQuery. Najwyraźniej nie wiesz zbyt wiele na temat różnic między jQuery i JavaScript - tom10271


Odpowiedzi:


Okej, więc masz dwie opcje:

  1. Użyj akordeonu jQuery UI - jest to przyjemne, łatwe i szybkie. Zobacz więcej informacji tutaj
  2. Lub, jeśli nadal chcesz to zrobić samodzielnie, możesz usunąć fieldset (i tak nie jest semantycznie słuszne, aby użyć go do tego) i stworzyć strukturę samodzielnie.

Oto jak to zrobić. Utwórz strukturę HTML w następujący sposób:

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

Z tym CSS: (To jest ukryć .content rzeczy, gdy ładuje się strona.

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

Następnie za pomocą jQuery napisz a click wydarzenie dla nagłówka.

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

});

Oto wersja demonstracyjna: http://jsfiddle.net/hungerpain/eK8X5/7/


152
2017-07-04 00:42



+1, ponieważ rozwiązałoby to problem, gdyby na stronie znajdował się więcej niż jeden element DIV. Innymi słowy, ponieważ kierujesz się na treść w klikniętym nagłówku, skaluje się to dobrze. - jmort253
Zestaw pól nie jest konieczny. Pozbędę się go i użyję granicy. Jest to doskonałe, ponieważ wybiera element div do rozwinięcia względem klikniętego nagłówka, co jest ważne z tego powodu, że mogę mieć kilka różnych numerów wymienionych elementów w zależności od ustawień użytkownika i innych czynników. - Ryan Mortensen
@Unipartisandev spójrz na to: jsfiddle.net/hungerpain/476Nq pełnoprawny przykład :) - krishgopinath
Naprawdę doceniam pomoc. Będą inne części strony, które bez wątpienia będą wymagały użycia akordeonu, nawet jeśli ta jedna konkretna rzecz jest bardziej przykładem na wszystko lub nic. Nadal mam problemy. Mój jQuery był przestarzały i nie ładował się. To naprawiono, ale nadal nie działa. Zmywałem się z tym już od dobrej godziny, spocznę na tym. Może jutro to mnie uderzy. - Ryan Mortensen
Cudownie, dzięki. Zaoszczędziłeś dużo czasu! - Basil Musa


Co powiesz na:

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>

Skrzypce

W ten sposób wiążesz wydarzenie click z .majorpoints class a nie musisz za każdym razem zapisywać go w kodzie HTML.


17
2017-07-04 00:25



jak będzie closest pracuje tutaj? - krishgopinath
Cześć raam86, Zrobiłbym to o krok dalej i zrobię .find na div używając klasy zamiast id. Jeśli osoba pytająca ma kilka takich zestawów pól na stronie, będzie chciał skierować hider na cel związany z kliknięciem określonego zestawu pól. Mam nadzieję że to pomoże! :) Na przykład możesz użyć .closest, aby uzyskać odniesienie do div rodzica, a następnie użyj .find, aby zlokalizować div z class = "hider" zamiast tego. - jmort253
Wiem, że jest 3 nad ranem;), ale zauważyłem, że nadal używasz id w swoim jsFiddle. Może to spowodować niezdefiniowane zachowanie, ponieważ specyfikacja W3C mówi, że każdy identyfikator powinien być unikalny. Jeśli zmienisz hider na klasę, będzie to bardziej odporne na błędy lub dziwne, niewyjaśnione zachowanie w innych przeglądarkach. Mam nadzieję że to pomoże! - jmort253
powinien to być $ ("mainpointslegend"). click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); LUB gdy kliknięcie dowolnego miejsca w zestawie pól spowoduje jego zwinięcie. - Awatatah


Przede wszystkim Twój JavaScript nie używa nawet jQuery. Istnieje kilka sposobów, aby to zrobić. Na przykład:

Pierwszy sposób, za pomocą jQuery toggle metoda:

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

Innym sposobem jest po prostu użycie jQuery show metoda:

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

Trzecim sposobem jest użycie slideToggle metoda jQuery, która pozwala na pewne efekty. Jak na przykład $('#showMe').slideToggle('slow'); który powoli wyświetli ukryty div.


6
2017-07-04 00:33



Załóżmy, że ma on więcej niż jeden z tych elementów showMe na stronie? Pamiętaj, że używa pętli for do zbudowania ich listy, więc kierowanie na class = "showMe" wpłynęłoby tylko na pierwsze wystąpienie tego elementu. Moją sugestią jest odwołanie się do elementu showMe w odniesieniu do kliknięcia. To byłoby dobre rozwiązanie. Mam nadzieję że to pomoże! :) - jmort253
Racja, ale używa pętli do zbudowania listy w serii <li> elementy, nie divy. Tak czy inaczej, może użyć identyfikatora elementu, aby go ukryć. - Mike Hawkins
Myślisz o podsekcji i zapominasz, że będzie ich więcej. Każdy Sekcja jest wypełnione elementami li w podrozdział. "Ta lista jest tworzona przez pętlę foreach, która kompiluje się z informacjami z mojej bazy danych.Każdy element jest kontenerem z różnymi sekcjami, więc nie jest to lista taka jak 1, 2, 3 ... itd. Zamawiam powtarzające się sekcje z informacjami W każdej sekcji znajduje się podsekcja. " krótko mówiąc, po prostu pokazał ci tylko jedną sekcję, chociaż będzie jej więcej. - jmort253


Wiele problemów tutaj

Przygotowałem dla ciebie skrzypce: 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





spróbuj jquery,

  <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





Możesz rzucić okiem na tę prostą metodę JavaScript, która zostanie wywołana po kliknięciu linku, aby panel / div rozwinął się lub zwinął.

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

Możesz przekazać identyfikator div i będzie on przełączał pomiędzy wyświetlaniem "brak" lub "blok".

Oryginalne źródło na snip2code - Jak zwinąć div w html


3
2018-01-11 10:11





Oto mój przykład animacji na liście pracowników z rozwinięciem opisu.

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

Skrzypce


3
2018-05-20 18:16





Spojrzeć na toggle()  jQuery funkcja:

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

Również, innerHTML  jQuery Funkcja jest .html().


3
2017-07-04 00:28



Cześć, witamy w Stack Overflow! Powinieneś pokazać przykład, aby odpowiedź była bardziej kompletna. Jeśli link miałby zostać przerwany, Twoja odpowiedź byłaby przydatna przyszłym użytkownikom. Powodzenia! :) - jmort253
Możesz edytować, aby dodać przykład lub dodać go jako komentarz. Dzięki. - JGallardo


Ponieważ masz jQuery na stronie, możesz to usunąć onclickatrybut i majorpointsexpand funkcjonować. Dodaj poniższy skrypt na dole strony lub najlepiej do zewnętrznego pliku .js:

$(function(){

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

});

To rozwiązanie powinno działać z Twoim HTMLem, ale nie jest to bardzo solidna odpowiedź. Jeśli zmienisz fieldset układ, może go złamać. Sugerowałbym, żebyś umieścił class atrybut w tym ukrytym div, jak class="majorpointsdetail" i użyj tego kodu zamiast:

$(function(){

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

});

Obs: nie ma zamknięcia </fieldset> w twoim pytaniu, więc zakładam, że ukryty div znajduje się wewnątrz zestawu.


2
2017-07-04 00:41



Masz rację. Istnieje zestaw pól zamykających, ale przegapiłem go w moim pytaniu. Pojawia się zaraz po zamykającym wewnętrznym </ div> i przed zamykającym zewnętrznym </ div> - Ryan Mortensen


Jeśli użyjesz roli danych zwijanej np.

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

następnie zamknie rozszerzony div

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

1
2017-08-29 10:00