Question

我正在试图弄清楚如何将手风琴类型的菜单和弹出菜单集成在一起。理想情况下，我希望有一个垂直菜单，显示制造商，当点击时，作为手风琴展示该制造商的产品系列。单击单个产品系列时，会弹出一个弹出菜单，以显示该系列中的各个产品。

有没有人见过这样或更好的现有代码，谁能告诉我如何实现这种效果？提前谢谢。

<ul>
  <li>Manufacturer 1 (drops product lines in accordion)
    <ul>
      <li>Product Line 1
        <ul>
          <li>Product 1</li> (flyout menu for products)
          <li>Product 2</li>
         </ul>
       </li>
       <li>Product Line 2
         <ul>
           <li>Product 1</li>
           <li>Product 2</li>
         </ul>
       </li>
     </ul>
   </li>
   <li>Manufacturer 2
   etc...

Answer 1

使用JqueryUI这应该很容易。

使用内置Accordion的Menu。

Link to JSFiddle

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $("#menu").menu();
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <div id="accordion">
         <h3>Section 1</h3>

        <div>
            <ul id="menu">
                <li class="ui-state-disabled"><a href="#">Aberdeen</a>

                </li>
                <li><a href="#">Ada</a>

                </li>
                <li><a href="#">Adamsville</a>

                </li>
                <li><a href="#">Addyston</a>

                </li>
                <li> <a href="#">Delphi</a>

                    <ul>
                        <li class="ui-state-disabled"><a href="#">Ada</a>

                        </li>
                        <li><a href="#">Saarland</a>

                        </li>
                        <li><a href="#">Salzburg</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Saarland</a>

                </li>
                <li> <a href="#">Salzburg</a>

                    <ul>
                        <li> <a href="#">Delphi</a>

                            <ul>
                                <li><a href="#">Ada</a>

                                </li>
                                <li><a href="#">Saarland</a>

                                </li>
                                <li><a href="#">Salzburg</a>

                                </li>
                            </ul>
                        </li>
                        <li> <a href="#">Delphi</a>

                            <ul>
                                <li><a href="#">Ada</a>

                                </li>
                                <li><a href="#">Saarland</a>

                                </li>
                                <li><a href="#">Salzburg</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Perch</a>

                        </li>
                    </ul>
                </li>
                <li class="ui-state-disabled"><a href="#">Amesville</a>

                </li>
            </ul>
        </div>
         <h3>Section 2</h3>

        <div>
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
                faucibus urna.</p>
        </div>
    </div>
</body>

手风琴菜单与嵌套弹出窗口

1 个答案: