0
У меня есть Javascript Accordiong, в настоящее время он отображает первый dd при загрузке страницы, а затем, когда вы нажимаете на тег dt, открытый dd должен закрываться, а тег dd внутри dt нажал шоу slidedown.Javascript Accordion не работает, DD не сползает
Однако, когда первый dd отображается при загрузке, открытый dd закрывается при нажатии другого dt, но следующий dd не показывает.
Может кто-то пожалуйста, помогите мне:/
Мои JS:
//Accordion - Hides open, and opens the clicked
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
$('dd').slideUp('slow'); //slides up current dd
$(this).parent('dt').next('dd').slideDown('slow');
});
});
Это мой HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Hobbies</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscript.js"></script>
<link rel="stylesheet" href="style\main.css" media="screen" />
</head>
<body>
<div id="container">
<a name="top"></a>
<div>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="hobbies.html">Hobbies</a>
<ul>
<li><a href="hobbies.html#uni">University</a></li>
<li><a href="hobbies.html#games">Gaming</a></li>
<li><a href="hobbies.html#chess">Chess</a></li>
<li><a href="hobbies.html#golf">Golf</a></li>
<li><a href="hobbies.html#music">Harmonica</a></li>
</ul>
</li>
<li><a href="image.html">Images</a></li>
</ul>
</div>
<div id="contenthobby">
<div>
<dt><a name="uni"><h2>University</h2></a></dt>
<dd>
<div class="pa">
<p> content
</div>
<div class="pic">
<img src="http://physics.uq.edu.au/ap/cosmicflow/wp-content/uploads/2011/11/uq_logo.gif"
alt="Error Loading Image">
<p>This is the UQ logo</p>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-27.497899,153.013222&zoom=16&size=250x250&markers=-27.497899,153.013222&sensor=false" alt="The University of Queensland"/>
<p>This is UQ</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="games"><h2>Gaming</h2></a></dt>
<dd>
<div class="pa">
<p>I love to play games, even though it wastes so much time and amounts to nothing.
It allows me to just go into another world. Something amazing when your slaying dragons
haha.</p>
<p>SKYRIM!</p>
<p>What I Like About it</p>
<ol>
<li>Able to immerse yourself into the game</li>
<li>Gets the adrenalin pumping when your in an intense fight</li>
<li>Allows for late night fun</li>
</ol>
</div>
<div class="pic">
<img src="http://www.darylh.com/images/articleimages/SkyrimLogo.png"
alt="Error loading image: http://www.darylh.com/images/articleimages/SkyrimLogo.png">
<p>This is the game logo for skyrim</p>
<iframe width="320" height="240" src="http://www.youtube.com/embed/ARaOOKafLEw"></iframe>
<p>This is a video of the fun shout in skyrim.</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="chess"><h2>Chess</h2></a></dt>
<dd>
<div class="pa">
<p> I love playing chess. It is a good way to unwind, will keeping your mind
sharp. It allows you to hone your skills and adapt your way of thinking.</p>
<p>Chess is a game played by men and boys alike, and this is why i believe
it is essential to a persons growth. Hence why I play it.</p>
<p>What I Like About it</p>
<ol>
<li>Sharpens your mind</li>
<li>Fun to work out the problem and beat your opponenet</li>
<li>Gives you a clearer outlook on the world</li>
</ol>
</div>
<div class="pic">
<img src="http://www.graemeanthonypewter.com.au/uploads/image/Armageddon-Chess-Set-2.jpg" alt="chess" height="250" width="250">
<p>This is an example of a chess set</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif" alt="chess board" width="250" height="250">
<p>This is a chess move, used by pros</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="golf"><h2>Golf</h2></a></dt>
<dd>
<div class="pa">
<p>The sport of golf is one of majesty and finesse. It allows one to realise
that one cannot focus on where he is, but where he is going, and how he is
going to get there!</p>
<p>What I Like About It</p>
<ol>
<li>Its outdoors</li>
<li>Is fun to play</li>
<li>Get to drive around in the golf cart</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.ashlargolfclub.com.au/upload/wysiwyg/whatsonIndex/Copy%20of%20Copy%20of%20Golf-Ball-and-Tee.jpg" alt="Golf ball">
<p>This is a golf ball</p>
<iframe width="250" height="200" src="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&output=embed"></iframe><br /><small><a href="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<p>This is my favourite golf course</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="music"><h2>Harmonica</h2></a></dt>
<dd>
<div class="pa">
<p>I Love playing the harmonica, it allows me to just release my feelings
through music.</p>
<p>It also allows me to learn control, in how to release air, and adjust my
mouth to get the perfect pitch and sound</p>
<p>What I like About It</p>
<ol>
<li>Its a musically instrument</li>
<li>It has soul</li>
<li>It allows me to unwind after a hard day of work</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.harmonicagame.com/help/harmonica_tab_screen.gif" alt="Harmonica">
<p>These are the chords of a harmonica</p>
<img width="250" height="250" src="http://www.hoerl.com/Graphics/music_harm_hold.gif" alt="Proper way to hold">
<p>How to Hold a Harmonica</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
</div>
<footer class="footer">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</footer>
</div>
</body>
</html>
Добавлен онлайн пример: http://jsfiddle.net/tvtrX/ – Joe
только небольшая заметка при нажатии на кнопку открыт Dd снова он будет вести себя шаткий. –
Hiya, Если это поможет вам: улучшить версию, которую вы получили выше: http://jsfiddle.net/tvtrX/ (вы можете отметить поведение Imentioned) ура! –