Question

我刚刚在网上找到了这个脚本。但是当我在我的代码中插入它时，它无法正常工作。当我点击accord-header时，acc-content应该“滑出”或只是从可见变为不可见。我是否使用错误的语法或问题在哪里？如果有人可以帮助我会很棒。我准备了一个codenippet。

      
            <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

为什么这种手风琴切换不起作用？

1 个答案: