Question

我正在尝试使用jquery用户界面并尝试制作手风琴菜单。我无法让菜单运行，如示例中所示：http://jqueryui.com/accordion/ 我没有具体的问题，因为我不知道我的错误在哪里。如果您检查我的代码并标记我的错误，我将不胜感激。感谢

这是代码：

    <!DOCTYPE html>
<html>
      <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src = "js/jquery-ui-1.10.4.min.js"></script>
         <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.min.css" />
        <style type="text/css" title="text/css">
            body {
                width:60%;
            }
            h1.ui-accordion-header {
                font-size : 10px;
            }
            div.ui-accordion-content {
                font-size : 15px;
                font-family : georgia;
            }
            </style>
            <script type="text/javascript" language="javascript">
             $(document).ready(function() { 
              $( "#ui-accordion-header" ).accordion();
             });

            </script>
        </head>
        <body>
            <div id="ui-accordion-header"  style="height:250px;margin-bottom:1em;">
                <ul>  
                    <li>
                        <a>   Guitar</a>
                        <div>
                        <ul>
                            <li><a>  Electric</a></li>
                            <li><a>  Acoustic</a></li>
                            <li><a>  Amps</a></li>
                            <li><a>  Effects A</a></li>
                            <li><a>  Effects B</a></li>
                            <li><a>  Effects C</a></li>
                            <li><a>  Effects D</a></li>
                            <li><a>  Accessories</a></li>
                        </ul> 
                    </li>
                    <li>
                    </div>
                        <a>  Bass</a>
                        <div>
                        <ul>
                            <li><a>  Electric</a></li>
                            <li><a>  Acoustic</a></li>
                            <li><a>  Amps</a></li>
                            <li><a>  Effects</a></li>
                            <li><a>  Accessories</a></li>
                        </ul> 
                    </li>
                    <li>
                    </div>
                        <a>  Drums</a>
                        <div>
                        <ul>
                            <li><a>  Acoustic Drums</a></li>
                            <li><a>  Electronic Drums</a></li>
                            <li><a>  Cymbals</a></li>
                            <li><a>  Hardware</a></li>
                            <li><a>  Accessories</a></li>
                        </ul> 
                    </li>
                </ul>
            </div>
            </div>
        </body>
    </html>

Answer 1

要使用accordian，您必须遵循以下基本的html结构

<div id="accordian">
 <h3>title1</h3>
 <div>content1</div>
 <h3>title2</h3>
 <div>content2</div>
</div>

并包含版本1.11.1不具备的jquery-UI库，因此请在外部添加。

使用以下HTML代码 -

  <div id="ui-accordion-header"  style="height:250px;margin-bottom:1em;">

                            <h3>  Guitar</h3>
                            <ul>
                                <li><a>  Electric</a></li>
                                <li><a>  Acoustic</a></li>
                                <li><a>  Amps</a></li>
                                <li><a>  Effects A</a></li>
                                <li><a>  Effects B</a></li>
                                <li><a>  Effects C</a></li>
                                <li><a>  Effects D</a></li>
                                <li><a>  Accessories</a></li>
                            </ul> 
                            <h3>  Bass</h3>
                            <ul>
                                <li><a>  Electric</a></li>
                                <li><a>  Acoustic</a></li>
                                <li><a>  Amps</a></li>
                                <li><a>  Effects</a></li>
                                <li><a>  Accessories</a></li>
                            </ul> 
                            <h3>  Drums</h3>
                            <ul>
                                <li><a>  Acoustic Drums</a></li>
                                <li><a>  Electronic Drums</a></li>
                                <li><a>  Cymbals</a></li>
                                <li><a>  Hardware</a></li>
                                <li><a>  Accessories</a></li>
                            </ul> 
                </div>

从});

中删除额外的document.ready

$(document).ready(function() { 
    $( "#ui-accordion-header" ).accordion();
 });

Accordian Demo

这是关于Jquery手风琴的一个问题

1 个答案: