Ik heb een lijst op mijn site gemaakt. Deze lijst wordt gemaakt door een foreach-lus die bouwt met informatie uit mijn database. Elk item is een container met verschillende secties, dus dit is geen lijst als 1, 2, 3 … etc. Ik vermeld het herhalende secties met informatie. In elke sectie is er een subsectie. De algemene build is als volgt:
<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>
Dus probeer ik een functie te bellen met OnClick = “MajorPointingexpand ($ (). Vind (‘Legend’). Innerhtml)”
De div die ik probeer te manipuleren is style = “Display: NONE” Standaard, en ik wil JavaScript gebruiken om het zichtbaar te maken op klik.
De “$ (deze). Find (‘Legend’). Innerhtml” probeert in dit geval te slagen, in dit geval, “Expand” als een argument in de functie.
Hier is het 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";
}
}
Ik ben er bijna 100% zeker van dat mijn probleem de syntaxis is, en ik heb niet veel verstand van hoe javascript werkt.
Ik heb jQuery gekoppeld aan het document met:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
In het gedeelte <head></head>.
Antwoord 1, autoriteit 100%
Ok, dus je hebt hier twee opties:
- Gebruik de accordeon van jQuery UI – het is leuk, gemakkelijk en snel. Bekijk hier
- Of, als je dit nog steeds zelf wilt doen, kun je de
fieldsetverwijderen (het is semantisch niet juist om het hier toch voor te gebruiken) en zelf een structuur maken.
meer informatie
Zo doe je dat. Maak een HTML-structuur als volgt:
<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>
Met deze CSS: (Dit is om de .contentdingen te verbergen wanneer de pagina wordt geladen.
.container .content {
display: none;
padding : 5px;
}
Schrijf vervolgens met jQuery een click-gebeurtenis voor de koptekst.
$(".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";
});
});
});
Hier is een demo: http://jsfiddle.net/hungerpain/eK8X5/7/
Antwoord 2, autoriteit 12%
wat dacht je van:
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
Op deze manier bind je de gebeurtenis click aan de klasse .majorpointsen hoef je deze niet elke keer in de HTML te schrijven.
Antwoord 3, autoriteit 4%
Misschien wil je eens kijken naar deze eenvoudige Javascript-methode die moet worden aangeroepen wanneer je op een link klikt om een paneel/div uit te vouwen of samen te vouwen.
<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>
U kunt de div-ID doorgeven en deze schakelt tussen weergave ‘none’ of ‘block’.
Originele bron op snip2code– Een div samenvouwen in html
Antwoord 4, autoriteit 4%
Dus ten eerste gebruikt uw Javascript niet eens jQuery. Er zijn een paar manieren om dit te doen. Bijvoorbeeld:
Eerste manier, met behulp van de jQuery toggle-methode:
<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/
Een andere manier is om de jQuery showmethode te gebruiken:
<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/
Een derde manier is om de slideTogglemethode van jQuery te gebruiken, die enkele effecten mogelijk maakt. Zoals $('#showMe').slideToggle('slow');waarmee de verborgen div langzaam wordt weergegeven.
Antwoord 5, autoriteit 3%
Veel problemen hier
Ik heb een viool opgezet die voor u werkt: http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
Antwoord 6, autoriteit 2%
probeer 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");
}
}
Antwoord 7, autoriteit 2%
Hier is mijn voorbeeld van een animatie van een personeelslijst met een beschrijving uitvouwen.
<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="https://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="https://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="https://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="https://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="https://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="https://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="https://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>
Antwoord 8, autoriteit 2%
Kijk eens naar toggle()jQueryfunctie :
Ook innerHTMLjQueryFunctie is .html().
Antwoord 9
Aangezien je jQuery op de pagina hebt, kun je dat onclick-attribuut en de majorpointsexpand-functie verwijderen. Voeg het volgende script toe aan de onderkant van je pagina of, bij voorkeur, aan een extern .js-bestand:
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Deze oplossing zou met je HTML moeten werken zoals het is, maar het is niet echt een heel robuust antwoord. Als u de lay-out van uw fieldsetwijzigt, kan deze breken. Ik stel voor dat je een class-attribuut in die verborgen div plaatst, zoals class="majorpointsdetail"en in plaats daarvan deze code gebruikt:
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: er is geen afsluitende </fieldset>-tag in uw vraag, dus ik neem aan dat de verborgen div zich in de fieldset bevindt.
Antwoord 10
Als u de opvouwbare gegevensrol heeft gebruikt, bijvoorbeeld
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
dan wordt de uitgevouwen div gesloten
$("#selector").collapsible().collapsible("collapse");
Antwoord 11
Bekijk de Readmore.jsbibliotheek van Jed Foster.
Het gebruik is zo simpel als:
$(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>Antwoord 12
Gebruik pure javascript
const collapsableBtn = document.querySelectorAll('.collapsable-toggle');
for (let index = 0; index < collapsableBtn.length; index++) {
collapsableBtn[index].addEventListener('click', function(e) {
// e.preventDefault();
e.stopImmediatePropagation();
iterateElement = this;
getCollapsableParent = iterateElement.parentElement;
if(getCollapsableParent.classList.contains('show')) {
getCollapsableParent.classList.remove('show')
iterateElement.innerText = iterateElement.getAttribute('data-onCloseText');
} else {
getCollapsableParent.classList.add('show');
iterateElement.innerText = iterateElement.getAttribute('data-onOpenText');
}
})
}.collapsable-container #expand {
display:none;
}
.collapsable-container.show #expand {
display:block;
}<div class="collapsable-container">
<a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide First Content" data-onCloseText="Show First Content">Show First Content</a>
<div id="expand">
This is some Content
</div>
</div>
<div class="collapsable-container">
<a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide Second Content" data-onCloseText="Show Second Content">Show Second Content</a>
<div id="expand">
This is some Content
</div>
</div>