Javascript手风琴不工作,DD未向下滑动

Javascript手风琴不工作,DD未向下滑动,javascript,jquery,html,accordion,Javascript,Jquery,Html,Accordion,我有一个Javascript手风琴,当前它在加载页面时显示第一个dd,然后当您单击dt标记时,打开的dd应该关闭,dt中的dd标记单击后显示向下滑动 然而,在加载时显示第一个dd,单击另一个dt时打开的dd关闭,但下一个dd不显示 有人能帮我吗/ 我的JS: //Accordion - Hides open, and opens the clicked $(document).ready(function() { $('dd:not(:first)').hide();

我有一个Javascript手风琴,当前它在加载页面时显示第一个dd,然后当您单击dt标记时,打开的dd应该关闭,dt中的dd标记单击后显示向下滑动

然而,在加载时显示第一个dd,单击另一个dt时打开的dd关闭,但下一个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>

业余爱好

  • 这是我最喜欢的高尔夫球场

    $(这个)
    在你的例子中是'dt',所以你需要找到下一个元素('dd'):


    编辑还添加了一个条件,仅当当前dd隐藏时才对幻灯片进行动画制作。

    工作演示

    好读:API:

    slideToggle

    使用此功能,您还可以关闭打开的
    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');
    
    
            });
        });​
    

    当你再次点击打开的dd时,只需一个小便条,它就会表现出不稳定的行为。嗨,如果这对你有帮助的话:为了增强上面的版本:(你可以注意到上面提到的行为)干杯!
      $(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');
    
    
            });
        });​