在此页面中，有一个问题列表，在点击时会展开并显示答案。我试图在问题扩展时改变问题的颜色（只有问题），并在扩展另一个问题时将其改回正常状态。我想我尝试了css文件中的所有内容，但我无法做到......如果有人能帮助我，我会感激它。我附上了两个关键文件。
提前致谢！
li {
font-size:0.75em;
list-style-image:url(images/bullet.png);
}
.new_ServHeader {
font-size:0.9em;
padding-top:2.1em;
font-weight:600;
}
.new_ServHeader_ {
font-size:0.9em;
padding-left: 2.5em;
font-weight:600;
}
.flashObj {
padding-left: 15em;
position:absolute;
z-index:20;
}
.leftContent {
width: 30%;
text-align:right;
margin-top:-2.1em;
float:left;
}
.rightContent {
width: 70%;
float:right;
margin-top:-2.5em;
font-family:Arial, Helvetica, sans-serif;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bgr_01.jpg);
background-repeat: repeat-x;
}
.header {
margin: 0px;
padding: 0px;
float: left;
height: 192px;
width: 1024px;
}
.maintxts {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
float: right;
width: 770px;
margin-top:10px;
}
.footer {
margin: 0px;
padding: 0px;
height: 179px;
width: 100%;
background-image: url(images/interface_33.png);
background-repeat: repeat-x;
background-position: left top;
}
.footerin {
background-image: url(images/interface_35.png);
background-repeat: no-repeat;
background-position: center top;
height: 175px;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
.style1 {
font-size: 12px;
color: #666666;
}
.style2 {color: #330099}
.style3 {color: #46b08a}
.style4 {
font-size: 12px;
font-weight: bold;
color: #FFFFFF;}
.style5 {
color: #FF9900;
font-weight: bold;
}
.menumain {
margin: 0px;
float: left;
height: 140px;
width: 1024px;
}
.menuz {
padding: 0px;
float: left;
width: 120px;
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-top: 14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.button {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: none;
font-variant: normal;
background-color: #46b08a;
margin: 0px;
padding: 0px;
float: left;
height: 21px;
width: 120px;
}
.button2 {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: none;
font-variant: normal;
background-color: #7f8190;
margin: 0px;
padding: 0px;
float: left;
height: 21px;
width: 120px;
}
.mainz {
padding: 0px;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.menuz a:link {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: none;
font-variant: normal;
color: #FFFFFF;
text-decoration: none;
}
.menuz a:visited {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: none;
font-variant: normal;
color: #FFFFFF;
text-decoration: none;
}
.menuz a:hover {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: none;
font-variant: normal;
color: #CCCCCC;
text-decoration: none;
}
#footerline {
background-image:url(images/interface_32.png);
background-repeat:no-repeat;
background-position:center top;
}
.galleryz {
margin: 0px;
padding: 0px;
float: right;
width: 530px;
}
.gallery_cat1 {
margin: 0px;
float: right;
width: 585px;
}
.cat3_gallery {
margin: 0px;
padding: 0px;
width: 585px;
}
#cubes {
padding-top: 0px;
}
.style6 {
font-size: 14px;
font-family: "Century Gothic";
font-style: italic;
color: #7f8190;
}
.style8 {
font-size: 12px;
color: #666666;
}
.content {
width: 95%;
padding: 10px 0px 32px 0px;
margin: 0 auto;
min-height: 500px;
}
.question {
position: relative;
border-radius: 1px;
background: #FFFFFF;
color: #cccccc;
margin-bottom: -15px;
margin-left: 0px;
margin-right: 0px;
margin-top: opx;
padding: 10px 10px 10px 40px;
display: block;
width: 595px;
cursor: pointer;
}
.answers {
background: #FFFFFF;
border-radius: 1px;
width: 615px;
color: #cccccc;
line-height: 1.5em;
padding: 0px 15px;
padding-top: -150px;
margin: 5px 0;
height: 0;
overflow: hidden;
z-index: 1;
position: relative;
opacity: 0.0;
-webkit-transition: .3s ease-in;
-moz-transition: .3s ease-in;
-o-transition: .3s ease-in;
transition: .3s ease-in;
}
.answer-content{
padding: 10px 20px 0px 20px;
}
.questions:checked ~ .answers{
height: auto;
opacity: 1;
padding-top: -150px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
.plus {
color: #46b08a;
position: absolute;
margin-left: 10px;
margin-top: 5px;
z-index: 5;
font-size: 2em;
/*line-height: 100%;*/
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.questions:checked ~ .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.questions {
display: none;
}<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
<!--
.style10 {color: #666666}
-->
</style>
</head>
<body>
<table width="980" border="0" cellpadding="0" cellspacing="0" class="mainz">
<tr>
<td height="184" align="left" valign="top">
<table width="1024" border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td width="427" align="right" valign="top"><a href="index.html"><img src="images/details_03.png" width="405" height="182" border="0" /></a></td>
<td width="203" align="left" valign="top"> </td>
<td width="394" align="left" valign="top"><img src="images/details_05.png" width="307" height="184" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="140" align="center" valign="top">
<table width="1024" border="0" cellpadding="0" cellspacing="0" class="menumain">
<tr>
<td width="138" align="left" valign="top"> </td>
<td width="120" align="left" valign="top">
<table width="120" height="120" border="0" cellpadding="0" cellspacing="0" class="menuz">
<tr>
<td height="24" align="left" valign="top">
<table width="120" border="0" cellpadding="0" cellspacing="0" class="button">
<tr>
<td width="10" align="left" valign="middle"><img src="images/bgr_16.jpg" width="9" height="21" /></td>
<td width="91" align="center" valign="middle"><a href="index.html">κεντρική</a></td>
<td width="10" align="right" valign="middle"><img src="images/bgr_18.jpg" width="9" height="21" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="24" align="left" valign="top">
<table width="120" border="0" cellpadding="0" cellspacing="0" class="button2">
<tr>
<td width="10" align="left" valign="middle"><img src="images/bgr_22.jpg" width="9" height="21" /></td>
<td width="91" align="center" valign="middle"><a href="bio.html">βιογραφικό</a></td>
<td width="10" align="right" valign="middle"><img src="images/bgr_23.jpg" width="9" height="21" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="24" align="left" valign="top">
<table width="120" border="0" cellpadding="0" cellspacing="0" class="button">
<tr>
<td width="10" align="left" valign="middle"><img src="images/bgr_16.jpg" width="9" height="21" /></td>
<td width="91" align="center" valign="middle"><a href="services.html">υπηρεσίες</a></td>
<td width="10" align="right" valign="middle"><img src="images/bgr_18.jpg" width="9" height="21" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="12" align="left" valign="top">
<table width="120" border="0" cellpadding="0" cellspacing="0" class="button2">
<tr>
<td width="10" align="left" valign="middle"><img src="images/bgr_22.jpg" width="9" height="21" /></td>
<td width="91" align="center" valign="middle"><strong>νευροψυχολογία</strong></td>
<td width="10" align="right" valign="middle"><img src="images/bgr_23.jpg" width="9" height="21" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="24" align="left" valign="bottom">
<table width="120" border="0" cellpadding="0" cellspacing="0" class="button">
<tr>
<td width="10" align="left" valign="middle"><img src="images/bgr_16.jpg" width="9" height="21" /></td>
<td width="91" align="center" valign="middle"><a href="contact.html">επικοινωνία</a></td>
<td width="10" align="right" valign="middle"><img src="images/bgr_18.jpg" width="9" height="21" /></td>
</tr>
</table> </td>
</tr>
<tr> </tr>
</table> </td>
<td width="727" align="right" valign="middle"><a href="http://www.gregadunn.com/" title="Developing Cerebral Cortex" target="_blank"><img src="images/contact_14.jpg" alt="" width="764" height="136" border="0"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" valign="top">
<table width="770" border="0" cellpadding="0" cellspacing="0" class="maintxts">
<tr>
<td width="30" align="left" valign="top"> </td>
<td width="145" align="left" valign="top"><span class="style6"><br>
ΝΕΥΡΟΨΥΧΟΛΟΓΙΑ</span>
</td>
<td width="595" align="left" valign="top" class="style8">
<div class="content">
<div class="touvlaki">
<input type="checkbox" id="question1" name="q" class="questions">
<label for="question1" class="question style10">
<em><strong><div class="questTitle">Τι είναι η Νευροψυχολογία;</div></strong></em> </label>
<div class="answers">
<div class="answer-content style10">
Είναι η επιστήμη που μελετάει τη νόηση και τη συμπεριφορά σε σχέση με τη δομή και τη λειτουργία του εγκεφάλου, συνδυάζοντας γνώσεις από την κλασσική ψυχολογία και τη νευρολογία.
<br>
<br>
Με απλά λόγια, η Νευροψυχολογία αξιολογεί τη σχέση <em>νου</em> και <em>εγκεφάλου</em>.
<br>
<br>
Ο <em>νους</em> αναφέρεται στο σύνολο των λειτουργιών που “<em>παράγει</em>” ο εγκέφαλος: αντίληψη, προσοχή, μνήμη, μάθηση, κατανόηση και παραγωγή του λόγου, επιτελικές διεργασίες (λογική, υπολογιστική ικανότητα, κριτική ικανότητα, επίλυση προβλημάτων, λήψη αποφάσεων, προγραμματισμός κ.α.). Τις ονομάζουμε αλλιώς <em>γνωστικές λειτουργίες</em> και είναι αυτές που, εν τέλει, θα καθορίσουν τη νόηση και τη συμπεριφορά μας.
Ο <em>εγκέφαλος</em> αναφέρεται στο όργανο του κεντρικού νευρικού συστήματος, εκεί όπου <em>"κατοικεί"</em> ο νους. </div>
</div>
</div>
<div class="touvlaki">
<input type="checkbox" id="question2" name="q" class="questions">
<label for="question2" class="question style10">
<em><strong>Που εφαρμόζεται η Νευροψυχολογία;</strong></em> </label>
<div class="answers">
<div class="answer-content style10">
Εφαρμόζεται τόσο στην έρευνα όσο και στην κλινική πράξη.<br>
<br>
Στον ερευνητικό τομέα ασχολείται με τη μελέτη της φυσιολογικής και παθολογικής λειτουργίας του εγκεφάλου και με το πώς τελικά παράγεται η ορθή (ή μη) νόηση και συμπεριφορά. <br>
<br>
Στην κλινική πράξη ασχολείται κυρίως με τη διάγνωση διαφόρων παθήσεων και νοσημάτων διαμέσου της νευροψυχολογικής αξιολόγησης των συμπτωμάτων, αλλά και με την θεραπευτική παρέμβαση όποτε αυτή είναι δυνατή. </div>
</div>
</div>
<div class="touvlaki">
<input type="checkbox" id="question3" name="q" class="questions">
<label for="question3" class="question style10">
<em><strong>Τι εργαλεία χρησιμοποιεί ο νευροψυχολόγος στην κλινική πράξη;</strong></em> </label>
<div class="answers">
<div class="answer-content">
<img src="images/bullet.png" width="15" height="15" align="absmiddle"><span class="style10">Στη διάγνωση:<br>
Η νευροψυχολογική αξιολόγηση των γνωστικών λειτουργιών γίνεται με ειδικά σχεδιασμένες δοκιμασίες (τεστ) που συγκρίνουν τις επιδόσεις του εξεταζόμενου με το μέσο όρο του υπόλοιπου, υγιούς πληθυσμού.<br>
Τα τεστ αυτά είναι προφορικά, οπτικά, κατασκευαστικά… οπότε και στη διαδικασία αξιολόγησης χρησιμοποιούνται αποσπάσματα κειμένων, εικόνες και άλλο οπτικό υλικό, αντικείμενα, μολύβι/χαρτί, ακόμα και προγράμματα στον υπολογιστή.<br>
<br>
Επίσης συλλέγονται πληροφορίες για τον εξεταζόμενο, με τη βοήθεια ερωτηματολογίων και άλλων μεθόδων συνέντευξης.<br>
<br>
<img src="images/bullet.png" width="15" height="15" align="absmiddle">Στη θεραπευτική παρέμβαση:<br>
Η νευροψυχολογική θεραπευτική παρέμβαση γίνεται με τη χρήση ειδικών ασκήσεων που στοχεύουν στην αποκατάσταση ή την ενδυνάμωση των γνωστικών λειτουργιών. Πρόκειται για ασκήσεις προφορικές, οπτικές, κατασκευαστικές, με μολύβι/χαρτί, στον υπολογιστή, και άλλες.
</span></div>
</div>
</div>
<div class="touvlaki">
<input type="checkbox" id="question4" name="q" class="questions">
<label for="question4" class="question style10">
<em><strong>Ποιοι μπορούν να απευθυνθούν στον νευροψυχολόγο;</strong></em> </label>
<div class="answers">
<div class="answer-content">
<span class="style10">Άτομα:
<br>
</span>
<ul class="style10">
<li>που ανησυχούν για τη μνήμη τους <br>
</li>
<li>που έχουν υποστεί κάποιο κρανιοεγκεφαλικό τραυματισμό (π.χ ατύχημα, χτύπημα ή πέσιμο) <br>
</li>
<li> που ίσως έχουν υποστεί εγκεφαλικό επεισόδιο<br>
</li>
<li> που έχουν διαγνωσθεί για όγκο εγκεφάλου<br>
</li>
<li> που πάσχουν από νευρολογικό νόσημα <br>
</li>
<li>που πάσχουν από λοιμώδεις διαδικασίες
(HIV/AIDS, εγκεφαλίτιδα από έρπη, νόσος του Lyme)<br>
</li>
<li>που έχουν υποστεί οξεία στέρηση οξυγόνου ή δηλητηρίαση από μονοξείδιο του άνθρακα <br>
</li>
<li>που έχουν εκτεθεί σε τοξικές καταστάσεις (κατάχρηση αλκόολ, ναρκωτικές ουσίες, βιομηχανικές και περιβαλλοντικές νευροτοξίνες)<br>
</li>
<li> με διατροφικές ανεπάρκειες ή μεταβολικές και ενδοκρινικές διαταραχές<br>
</li>
<li>με
σύνδρομο χρόνιας κόπωσης<br>
</li>
<li>με ψυχιατρικές διαταραχές (κατάθλιψη, άγχος, ψυχώσεις, κ.α.)<br>
</li>
<li>Όσοι παρουσιάζουν κάποια μεταβολή της νοητικής ικανότητας την οποία παρατηρούν είτε οι ίδιοι είτε άτομα του περίγυρού τους<br>
</li>
</ul>
<p class="style10">Η οικογένεια (σύζυγοι, παιδιά, συγγενείς), οι σύντροφοι, ακόμα και οι φίλοι ενός ασθενή με νευροψυχολογική διαταραχή, μπορούν να συναντήσουν τον νευροψυχολόγο για ενημέρωση και συμβουλές.<br>
<br>
Επίσης, τα άτομα που προσέχουν έναν ασθενή (φροντιστές κατ’ οίκον, εργαζόμενοι σε ιδρύματα) μπορούν να βοηθηθούν από μια εκπαιδευτική συνάντηση με τον νευροψυχολόγο.<br>
<br>
Είναι συχνό φαινόμενο η υπερκόπωση των συγγενών και φροντιστών ενός ασθενή με σοβαρή νευροψυχολογική διαταραχή. Σε αυτές τις περιπτώσεις έχει αποδειχθεί ότι η ψυχολογική αποφόρτιση και στήριξη των συγγενικών προσώπων και φροντιστών, η σωστή ενημέρωσή τους σχετικά με τη νόσο και οι οδηγίες διαχείρισης του ασθενή, βελτιώνουν την ποιότητα ζωής του νοσούντος αλλά και των ίδιων. </p>
</div>
</div>
</div>
<div class="touvlaki">
<input type="checkbox" id="question5" name="q" class="questions">
<label for="question5" class="question style10">
<em><strong>Ποιες συγκεκριμένες υπηρεσίες προσφέρονται στην νευροψυχολογική κλινική πράξη;</strong></em> </label>
<div class="answers">
<div class="answer-content">
<p><span class="style10"><em>Διάγνωση</em>: <br>
Ένας νευροψυχολόγος, αξιολογώντας τις γνωστικές λειτουργίες ενός ατόμου, μπορεί να διαγνώσει νοσήματα και παθήσεις όπως άνοιες, κρανιοεγκεφαλικές κακώσεις (δηλαδή τραυματισμούς που προκαλούν εγκεφαλικές βλάβες), εγκεφαλικά επεισόδια, όγκους εγκεφάλου, αποκλίσεις και μεταβολές της νοητικής ικανότητας, κ.α.
</span></p>
<p class="style10"><em>Θεραπευτική παρέμβαση</em>: <br>
Με ειδικά σχεδιασμένες ασκήσεις αποκατάστασης, ένας νευροψυχολόγος μπορεί να βοηθήσει στην ανάκτηση, υποκατάσταση ή ενδυνάμωση των γνωστικών λειτουργιών και δεξιοτήτων ενός ατόμου, ανάλογα με τη φύση και τη σοβαρότητα της πάθησής του. Επίσης, ασχολείται με τη διόρθωση συμπεριφορών και την επανεκπαίδευση σε κοινωνικές δεξιότητες που μπορεί να χαθούν ή να αλλάξουν λόγω εγκεφαλικής βλάβης. Κάποιες φορές, βέβαια, είναι εφικτή μονάχα η απλή ενδυνάμωση της νοητικής ικανότητας που στοχεύει στο να διατηρηθούν οι υπάρχουσες γνωστικές λειτουργίες και να επιβραδυνθούν,όσο είναι δυνατόν, οι εκφυλιστικές συνέπειες κάποιας νόσου. </p>
<p class="style10"><em>Ψυχοεκπαίδευση</em>: <br>
Πρόκειται για εκπαιδευτικές συναντήσεις του νευροψυχολόγου με τον ασθενή και την οικογένειά του, οι οποίες στοχεύουν: </p>
<ol class="style10">
<li> να ενημερώσουν σχετικά με μια νόσο (συμπτώματα, εξέλιξη, πρόγνωση) <br>
</li>
<li>να δώσουν απαραίτητες γνώσεις και οδηγίες για την αναγνώριση και διαχείριση της συμπτωματολογίας <br>
</li>
<li>να βοηθήσουν στην ανάπτυξη πρακτικών δεξιοτήτων για την καλύτερη ποιότητα ζωής του ασθενή και της οικογένειας καθώς η νόσος του εξελίσσεται. </li>
</ol>
<p class="style10"><em>Συνεδρίες ψυχολογικής στήριξης</em>: <br>
Ό νευροψυχολόγος, δεδομένης της εκπαίδευσής του στην ψυχολογία, κάνει συναντήσεις με τον ασθενή για την παρακολούθηση της πορείας της νόσου αλλά και για συζήτηση γύρω από το πώς αυτή επηρεάζει τη διάθεση και τις σχέσεις του. Στηρικτικές συναντήσεις γίνονται και με την οικογένεια του ασθενή, για την παροχή συμβουλευτικής σχετικά με τη νευροψυχολογική διαταραχή και - κυρίως - για την ψυχολογική υποστήριξη σε θέματα άγχους και κατάθλιψης που συχνά εμφανίζονται στα μέλη της. </p>
</div>
</div>
</div>
<div class="touvlaki">
<input type="checkbox" id="question6" name="q" class="questions">
<label for="question6" class="question style10">
<em><strong>Με ποιους άλλους επαγγελματίες της υγείας συνεργάζεται ένας νευροψυχολόγος;</strong></em> </label>
<div class="answers">
<div class="answer-content">
<p class="style10">Συχνά προκύπτει η ανάγκη για παραπομπή του εξεταζόμενου από τον νευροψυχολόγο σε κάποιον άλλο ειδικό ή, αντίστροφα, ένας άλλος ειδικός μπορεί να παραπέμψει τον ασθενή του στον νευροψυχολόγο.<br>
<br>
Ο στόχος πάντα είναι η καλύτερη διάγνωση, θεραπευτική παρέμβαση και παρακολούθηση του ενδιαφερόμενου, που πολλές φορές επιτυγχάνονται με τη συνεργασία διαφόρων ειδικοτήτων. <br>
<br>
Ο νευροψυχολόγος, λοιπόν, συνεργάζεται με ειδικούς της υγείας από τους τομείς της νευρολογίας, της γηριατρικής, της ψυχιατρικής, καθώς και της παιδοψυχολογίας, της λογοθεραπείας και της φυσιοθεραπείας. Επίσης, διασυνδέεται με κοινωνικούς λειτουργούς, διάφορες ειδικότητες της ιατρικής, συλλόγους, κ.τ.λ. </p>
<br>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"> </td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="footer">
<tr>
<td align="center" valign="top" id="footerline">
<table width="980" border="0" cellpadding="0" cellspacing="0" class="footerin">
<tr>
<td width="56" align="center" valign="top"> </td>
<td width="688" align="center" valign="top"> </td>
<td width="236" align="center" valign="top">copyright sofiatziraki.gr © 2015</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
$(this).scrollIntoView();
});
</script>
</body>
</html>
答案 0 :(得分：1)
在您的情况下，最简单的方法是添加如下内容：
.questions:checked + label { color:#f00; }
这将选中每个复选框旁边的标签，并在复选框处于选中状态时更改颜色。
<强> Demo