0

我有一个 Javascript Accordiong,目前它在页面加载时显示第一个 dd,然后当您单击 dt 标记时,打开的 dd 应该关闭并且 dt 中的 dd 标记单击显示幻灯片。

但是 atm 第一个 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&amp;zoom=16&amp;size=250x250&amp;markers=-27.497899,153.013222&amp;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&amp;num=1&amp;t=h&amp;hl=en&amp;ie=UTF8&amp;z=14&amp;ll=54.91103,25.312715&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com.au/maps?q=54.909901,25.311652&amp;num=1&amp;t=h&amp;hl=en&amp;ie=UTF8&amp;z=14&amp;ll=54.91103,25.312715&amp;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>
4

2 回答 2

1

工作演示 http://jsfiddle.net/UL3V3/1/

好读:API:http ://api.jquery.com/visible-selector/

slideToggle http://api.jquery.com/?ns0=1&s=slideToggle&go=

使用它,您也可以关闭打开dd

休息一下,您可以玩耍并找出行为。

这会有所帮助。B-)

jQuery代码

  $(document).ready(function() {
        $('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
        $('dt').click(function() {
         if ($(this).next('dd').is(":hidden"))
            $('dd').slideUp('slow');//slides up current dd 

            $(this).next('dd').slideToggle('slow');


        });
    });​
于 2012-05-27T08:27:29.667 回答
0

$(this)在您的情况下是“dt”,因此您需要找到下一个元素(“dd”):

$('dt').click(function() {
   if ($(this).next().is(":hidden")){
     $('dd:visible').slideUp('slow'); //slides up current dd 
     $(this).next().slideDown('slow');
   }
});

EDIT还添加了一个条件,仅在当前 dd 被隐藏时才为幻灯片设置动画。

于 2012-05-27T07:48:19.747 回答