如何使用 JQuery Accordion 执行此操作？

发布于 2024-12-10 08:52:05 字数 1573 浏览 0 评论 0原文

使用此处的示例：

http://jqueryui.com/demos/accordion/#custom-icons

我想让这些箭头和手风琴的工作方式完全相同，但是我当前的代码如下，带有静态 html（使用 UL 和 LI）：

<li id="ecartcategorieswidget-3" class="widget-1 widget-first widget sbg_widget Shop widget_ecartcategorieswidget">
    <h2 class="widgettitle sbg_title">Categories</h2>
    <ul class="ecart_categories">
      <li><a href="http://">category1</a>
        <ul class="children">
          <li><a href="http://">sub-category</a></li>
          <li><a href="http://">sub-category</a>
            <ul class="children">
              <li><a href="http://">sub-sub-category</a></li>
            </ul></li>
        </ul>
      </li>
      <li class="current><a href="http://">category2</a>
        <ul class="children">
          <li><a href="http://">sub-category</a></li>
          <li><a href="http://">sub-category</a>
            <ul class="children">
              <li><a href="http://">sub-sub-category</a></li>
            </ul></li>
        </ul>
      </li>
    </ul>
</li>

How do I make the JQuery example for my 上述 html 代码，那么category1和category2就像提供的示例jQuery url中的第1部分和第2部分一样吗？单击任一类别时，该类别中的所有子类别和子子类别都会一起向下滑动。它实际上是一个有 2 个类别的单级手风琴。

谢谢！

原文

Using the example from here:

http://jqueryui.com/demos/accordion/#custom-icons

I want to have those arrows and the accordion working the exact same, however my current code is as follows with static html (uses UL and LI's):

<li id="ecartcategorieswidget-3" class="widget-1 widget-first widget sbg_widget Shop widget_ecartcategorieswidget">
    <h2 class="widgettitle sbg_title">Categories</h2>
    <ul class="ecart_categories">
      <li><a href="http://">category1</a>
        <ul class="children">
          <li><a href="http://">sub-category</a></li>
          <li><a href="http://">sub-category</a>
            <ul class="children">
              <li><a href="http://">sub-sub-category</a></li>
            </ul></li>
        </ul>
      </li>
      <li class="current><a href="http://">category2</a>
        <ul class="children">
          <li><a href="http://">sub-category</a></li>
          <li><a href="http://">sub-category</a>
            <ul class="children">
              <li><a href="http://">sub-sub-category</a></li>
            </ul></li>
        </ul>
      </li>
    </ul>
</li>

How do I make the JQuery example work for my above html code, so that category1 and category2 is like section 1 and section 2 in the example jQuery url provided? When clicking on either category, all the sub and sub-sub categories within that category slide down together. It's literally a one-level accordion with 2 categories.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稚然 2024-12-17 08:52:05

本文给出了如何将列表设计为手风琴样式的概要。这是一个示例： http://demos.net.tutsplus.com/020_jQueryUI /accordion-jquery-ui.htm。

本质上，只需摆弄以下样式：

ul.ecart_categories, ul.ecart_categories ul { list-style: none; margin: 0; }
ul.ecart_categories { border-bottom: 1px solid #000E2E; }
ul.ecart_categories li { border: 1px solid #000E2E; border-bottom: none; }
ul.ecart_categories ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; }
ul.ecart_categories ul li:last-child { border-bottom: none; }
ul.ecart_categories a.heading {
    background: #F4FFF9;
    color: #999;
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 5px;
    text-decoration: none;
}
ul.ecart_categories a.heading:hover { background: #00B9D2; color: #fff; }
ul.ecart_categories li.ui-accordion-selected a.heading, ul.ecart_categories li.current a.heading { background: #025185; color: #fff; }
ul.ecart_categories li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; }
ul.ecart_categories li ul a:hover { border-bottom: none; }

看看将其应用到标记时的样子： http:// /jsfiddle.net/william/WbTPk/1/。

This article gives a run-down on how to style lists as an accordion. Here's an example: http://demos.net.tutsplus.com/020_jQueryUI/accordion-jquery-ui.htm.

Essentially, just fiddle with the following style:

ul.ecart_categories, ul.ecart_categories ul { list-style: none; margin: 0; }
ul.ecart_categories { border-bottom: 1px solid #000E2E; }
ul.ecart_categories li { border: 1px solid #000E2E; border-bottom: none; }
ul.ecart_categories ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; }
ul.ecart_categories ul li:last-child { border-bottom: none; }
ul.ecart_categories a.heading {
    background: #F4FFF9;
    color: #999;
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 5px;
    text-decoration: none;
}
ul.ecart_categories a.heading:hover { background: #00B9D2; color: #fff; }
ul.ecart_categories li.ui-accordion-selected a.heading, ul.ecart_categories li.current a.heading { background: #025185; color: #fff; }
ul.ecart_categories li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; }
ul.ecart_categories li ul a:hover { border-bottom: none; }

See how it looks like when applying it to your markup: http://jsfiddle.net/william/WbTPk/1/.

回复收藏 0 原文

~没有更多了~