Am creat o listă pe site-ul meu. Această listă este creată de o buclă foreach care se construiește cu informații din baza mea de date. Fiecare element este un container cu secțiuni diferite, deci nu este o listă de genul 1, 2, 3… etc. Eu listez secțiuni care se repetă cu informații. În fiecare secțiune, există o subsecțiune. Construcția generală este după cum urmează:
<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>
Așadar, încerc să apelez o funcție cu onclick=”majorpointsexpand($(this).find(‘legend’).innerHTML)”
Div-ul pe care încerc să îl manipulez este style=”display:none” în mod implicit și vreau să folosesc javascript pentru a-l face vizibil la click.
„$(this).find(‘legend’).innerHTML” încearcă să treacă, în acest caz, „Expand” ca argument în funcție.
Iată javascript-ul:
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";
}
}
Sunt aproape 100% sigur că problema mea este de sintaxă și nu prea știu cum funcționează javascript.
Am jQuery legat la document cu:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
În <head></head> secțiunea.
Bine, deci ai două opțiuni aici :
- Folosiți acordeonul jQuery UI – este frumos, ușor și rapid. Vezi mai multe informații aici
- Sau, dacă tot vrei să faci asta singur, ai putea să elimini
fieldset(oricum nu este corect din punct de vedere semantic să o folosești pentru asta) și să creezi o structură de unul singur.
Iată cum faci asta. Creați o structură HTML ca aceasta :
<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>
Cu acest CSS: (Aceasta este pentru a ascunde .content chestii atunci când se încarcă pagina.
.container .content {
display: none;
padding : 5px;
}
Apoi, folosind jQuery, scrieți o aplicație click eveniment pentru antet.
$(".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";
});
});
});
Iată un demo : http://jsfiddle.net/hungerpain/eK8X5/7/
Comentarii
- +1 deoarece acest lucru ar rezolva problema dacă ar exista mai mult de un element DIV pe pagină. Cu alte cuvinte, din moment ce vizați conținutul din cadrul antetului pe care s-a făcut clic, acest lucru se scalează bine. – > .
- Setul de câmpuri nu este imperativ. Voi scăpa de el și voi folosi doar o bordură. Acest lucru este excelent, deoarece selectează div-ul care trebuie extins în raport cu antetul pe care am făcut clic, ceea ce este important din cauza faptului că pot avea mai multe numere diferite de elemente listate în funcție de setările utilizatorului și de alți factori. – > .
- @Unipartisandev uitați-vă la asta : jsfiddle.net/hungerpain/476Nq exemplu în toată regula 🙂 – > .
- Apreciez foarte mult ajutorul. Vor exista și alte părți ale site-ului care, fără îndoială, vor trebui să folosească un acordeon, chiar dacă acest lucru particular este mai mult un exemplu de afișare de tip „totul sau nimic”. Încă mai am probleme. JQuery-ul meu era învechit și nu se încărca. Asta e reparat, dar tot nu reușesc să-l fac să funcționeze. M-am jucat cu el o oră bună, o să mă gândesc la asta. Poate că mâine mă va lovi. – > .
- Minunat, mulțumesc. A salvat o mulțime de timp! – > .
cum ar fi:
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>
Fiddle
În acest fel se leagă evenimentul de clic la evenimentul .majorpoints clasă și nu trebuie să scrieți de fiecare dată în HTML.
Comentarii
- Bună raam86, eu aș face un pas mai departe și aș face un .find pe div folosind o clasă în loc de un id. Dacă cel care întreabă are mai multe seturi de câmpuri pe pagină, va dori să vizeze hider-ul pentru cel legat de setul de câmpuri specific pe care a dat clic. Sper că acest lucru vă ajută! 🙂 De exemplu, ați putea folosi .closest pentru a obține o referință la div-ul părinte, apoi folosiți .find pentru a localiza div-ul cu un class=”hider” în schimb. – > .
- Știu că este 3 dimineața ;), dar tocmai am observat că încă folosești id-uri în jsFiddle-ul tău. Acest lucru ar putea duce la un comportament nedefinit, deoarece specificația W3C spune că fiecare id ar trebui să fie unic. Dacă schimbi hiderul într-o clasă, atunci acest lucru ar fi mai imun la bug-uri sau la comportamente ciudate, inexplicabile în alte browsere. Sper să vă fie de ajutor! – > .
- ar trebui să fie de fapt $(‘.majorpointslegend’).click(function(){ $(this).parent().find(‘.hider’).toggle(); }); SAU altfel, atunci când se face clic pe orice loc din setul de câmpuri, acesta se va prăbuși. – > .
Deci, în primul rând, Javascript-ul tău nici măcar nu folosește jQuery. Există câteva modalități de a face acest lucru. De exemplu:
Primul mod, folosind jQuery toggle metodă:
<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/
O altă modalitate este de a utiliza pur și simplu metoda jQuery show metoda jQuery:
<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/
Totuși, o a treia modalitate este de a utiliza metoda slideToggle din jQuery, care permite anumite efecte. Cum ar fi $('#showMe').slideToggle('slow'); care va afișa încet div-ul ascuns.
Comentarii
- Să presupunem că are mai multe dintre aceste elemente showMe pe pagină. Nu uitați că folosește o buclă for pentru a construi o listă a acestora, astfel încât ținta class=”showMe” ar afecta doar prima instanță a acestui element. Sugestia mea este să se facă referire la elementul showMe în raport cu cel pe care s-a făcut clic. Atunci aceasta ar fi o soluție bună. Sper să vă fie de ajutor! 🙂 – > .
- Corect, dar el folosește bucla pentru a construi lista într-o serie de
<li>elemente, nu div-uri. În orice caz, el ar putea folosi atunci ID-ul elementului pentru a-l ascunde. – > . - Te gândești la subsecțiuni și uiți că vor fi mai multe. Fiecare secțiune este populată cu elemente li într-o subsecțiune. „Această listă este creată de o buclă foreach care se construiește cu informații din baza mea de date. Fiecare element este un container cu secțiuni diferite, deci nu este o listă de genul 1, 2, 3… etc. Eu listez secțiuni care se repetă cu informații. În fiecare secțiune, există o subsecțiune.” pe scurt, pur și simplu v-a arătat doar o singură secțiune, chiar dacă vor fi mai multe. – > .
S-ar putea să doriți să aruncați o privire la această metodă Javascript simplă care să fie invocată atunci când faceți clic pe un link pentru a face ca un panou/div să se extindă sau să se prăbușească.
<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>
Puteți trece ID-ul div-ului și va comuta între afișarea ‘none’ sau ‘block’.
Sursa originală pe snip2code – Cum se prăbușește un div în html
Multe probleme aici
Am creat o fiddle care funcționează pentru tine: http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
încercați 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");
}
}
Aici este exemplul meu de animație o listă de personal cu extinde o descriere.
<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’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>
Aruncați o privire la toggle() jQuery funcție :
De asemenea, innerHTML jQuery Funcția este .html().
Comentarii
- Bună ziua, bine ați venit pe Stack Overflow! Ar trebui să arăți un exemplu pentru ca răspunsul tău să fie mai complet. Dacă link-ul s-ar rupe, răspunsul tău ar fi în continuare util pentru viitorii vizitatori. Mult succes! 🙂 – > .
- Ați putea fie să editați pentru a adăuga un exemplu, fie să adăugați acest lucru ca un comentariu. Mulțumesc. – > .
Din moment ce aveți jQuery pe pagină, puteți elimina acest lucru onclick și atributul majorpointsexpand funcția. Adăugați următorul script în partea de jos a paginii dvs. sau, de preferință, într-un fișier .js extern:
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Această soluție ar trebui să funcționeze cu HTML-ul tău așa cum este, dar nu este un răspuns foarte robust. Dacă schimbați fieldset aspectul, s-ar putea să se strice. V-aș sugera să puneți un fișier class în acel div ascuns, de genul class="majorpointsdetail" și să folosiți acest cod în schimb:
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: nu există o închidere </fieldset> în întrebarea ta, așa că presupun că div-ul ascuns este în interiorul setului de câmpuri.
Comentarii
- Aveți dreptate. Există un fieldset de închidere, dar mi-a scăpat în întrebare. Acesta vine imediat după </div> de închidere interioară și înainte de </div> de închidere exterioară… > .
Dacă ați folosit data-role colapsabil, de ex.
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
atunci se va închide div-ul extins
$("#selector").collapsible().collapsible("collapse");
Consultați Jed Foster’s Readmore.js a lui Foster Jed Foster.
Utilizarea sa este la fel de simplă ca:
Aici sunt opțiunile disponibile pentru a configura widget-ul:
Puteți să-l utilizați ca:
Sper că vă ajută.
$(this). Sper că vă ajută. – > Por jmort253.