为什么这个手风琴开关不起作用？

Question

我刚在网上找到这个脚本。但是当我将它插入我的代码时，它不起作用。当我点击 accord-header 时，accord-content 应该 "slide out" 或者只是从可见变为不可见。我使用错误的语法还是问题出在哪里？如果有人可以帮助我，那就太好了。我准备了代码片段。

      
            <div id="accordion">
                <div class="accord-header">
                    <a id="h31">
                    <span id="textspan1">1.Text<br /></span><br />
                    </a>
                </div>
                <div class="accord-content">
                    <p id="p1">
                    <span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et&nbsp;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br />
                    </p>
                </div>
            </div>

  $(document).ready(function($) {
    $('#accordion').find('.accord-header').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accord-content").not($(this).next()).slideUp('fast');

    });
  });

#accordion {
    float: left;
    height: auto;
    margin: 70px 0px 0px;
    clear: left;
    width: 100%;
    display: block;
}

#h31:hover {
    color: rgb(0, 235, 199);
    line-height: 1.5em;
    font-weight: 400;
}

#p1 {
    float: none;
    font-size: 1em;
    width: 100%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin: 0px 0px 0px 0%;
    clear: left;
    min-height: 149px;
    display: block;
    padding: 1.4% 1.4% 11px;
}

#Span {
    font-size: 1.3em;
    color: black;
    font-family: source-sans-pro;
    line-height: 1.3em;
    font-weight: 200;
}

#h31 {
    float: left;
    font-size: 1em;
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0px;
    clear: none;
    min-height: 0px;
    font-family: source-sans-pro;
    color: black;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 20px 0px 0px;
    display: block;
}

#textspan1 {
    font-weight: 300;
}

.accord-header {
    float: left;
    height: auto;
    margin-left: 0%;
    margin-top: 0px;
    clear: none;
    width: 100%;
    border-bottom-color: rgb(0, 235, 199);
    border-bottom-width: 6px;
    border-bottom-style: solid;
    cursor: pointer;
}

.accord-content {
    float: left;
    height: auto;
    margin-left: 0%;
    margin-top: 0%;
    clear: both;
    width: 100%;
}

.accord-content.default {display: block;}







@media only screen and (max-width: 1024px) {
   

    #accordion {
        float: left;
        height: auto;
        margin: 70px 0px 0px 1px;
        width: 100%;
        display: block;
        clear: both;
    }

    #p1 {
        display: block;
        font-size: 0.9em;
        font-family: source-sans-pro;
        clear: none;
        width: 100%;
    }

    #Span {
        float: none;
    }

    #h31 {
        float: left;
        font-size: 1em;
        height: auto;
        text-align: center;
        margin: 0px;
        clear: none;
        min-height: 0px;
        font-family: source-sans-pro;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        width: 100%;
    }

    .accord-header {
        float: left;
        height: auto;
        margin-left: 0%;
        margin-top: 0px;
        clear: none;
        width: 100%;
    }

    .accord-content {
        float: left;
        height: auto;
        margin-left: 0%;
        margin-top: 0px;
        clear: both;
        width: 100%;
    }
}







@media only screen and (max-width: 768px) {
   
    #p1 {
        font-size: 0.8em;
        line-height: 1.9em;
        font-weight: 300;
    }

    #h31 {
        margin-top: 0px;
        margin-left: 0px;
        clear: none;
    }

    #textspan1 {
        float: none;
        font-size: 1em;
        line-height: 1em;
    }

    #textspan2 {
        float: none;
        font-size: 1em;
        line-height: 1em;
        font-weight: 300;
    }
}

      
            <div id="accordion">
                <div class="accord-header">
                    <a id="h31">
                    <span id="textspan1">1.Text<br /></span><br />
                    </a>
                </div>
                <div class="accord-content">
                    <p id="p1">
                    <span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et&nbsp;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br />
                    </p>
                </div>
            </div>

Answer 1

滑出效果需要参考jquery库

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

检查这个 Jsfiddler

为什么这个手风琴开关不起作用？

why is this accordion toggle not working?

javascript

jquery

html

css

toggle