Question

我正在使用Zebra Accordion。不是那里最好的，但它与jQuery 1.5.2 100％兼容，显然过时了。

无论如何，当用户点击手风琴时，我希望箭头指向下方，非常像这样：

目前这是我的页面，如果你在详细选项卡中找到Alchemy，你会在那里找到两个Accordions：

http://www.planet.nu/dev/test-2/product-page.html

这是Zebra手风琴的CSS：

dl.Zebra_Accordion { width: 740px; font-size: 14px; }
dl.Zebra_Accordion dt { background: #878787; color: #FFF; font-weight: bold; padding: 8px; }
dl.Zebra_Accordion dt:hover { background: #0095da; }
dl.Zebra_Accordion dd { background: #EFEFEF; padding-top: 5px; padding-bottom: 305px; margin: 0; }
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #0095da; }

这是HTML：

<dl class="Zebra_Accordion">
            <dt><p class="accordion-header">Managed Services</p></dt>
            <dd>
               <p><span>Alchemy Social’s Managed Service solution works with businesses of all sizes — from brand new start-ups to established multinationals — ensuring that they connect with and engage the right social audiences.</span></p>
                <p>Our teams combine the perfect blend of skills, from traditional digital display through search to creative design. With offices around the world, we manage campaigns and support our clients whenever and wherever they need us:</p>
                    <ul>
                        <li class="alchemy-product-list">Full campaign management, from goal setting/strategy through to delivery and reporting</li>
                        <li class="alchemy-product-list">Targeting and segmentation planning</li>
                        <li class="alchemy-product-list">Custom built creative generation on demand (image and copy)</li>
                        <li class="alchemy-product-list">Daily optimisation</li>
                        <li class="alchemy-product-list">Regular reporting</li>
                        <li class="alchemy-product-list">Campaign review</li>
                        <li class="alchemy-product-list">Access to Experian’s unique and proprietary data assets to improve campaigns</li>
                    </ul>
            </dd>
            <dt>Licensed Services<img src="img/arrow-white.png" class="white-arrow"></dt>
            <dd>
                <p><span>As the social space evolves at tremendous speed, even the most experienced in-house teams can need support to stay ahead of the curve.</span></p>
                <p>Experian’s Alchemy Social Licensed solutions offer flexible, on-demand services to meet every need. Our client services team is amongst the most experienced in the industry, offering scalable support to your social strategies and campaigns.</p>
                <p><span>Alchemy SaaS</span></p>
                <p>Licensing the Alchemy Social Platform brings access to the full range of features of the Facebook ads manager platform, including:</p>
                <ul>
                    <li class="alchemy-product-list">Guidance on how to create, manage, report on and optimise campaigns</li>
                    <li class="alchemy-product-list">Access to regular webinars on new releases, features and best practices</li>
                    <li class="alchemy-product-list">Dedicated account management support and consultative advice</li>
                    <li class="alchemy-product-list">Create campaign rules for real-time cost per acquisition (CPA) optimisation</li>
                    <li class="alchemy-product-list">Effectively refine activity at various points of the campaign cycle</li>
                    <li class="alchemy-product-list">Control ad spend at segment level by location or target group</li>
                    <li class="alchemy-product-list">Analyse conversion data and integrate with other analytical tools</li>
                    <li class="alchemy-product-list">View real-time reporting to understand CPA and conversion rates at ad level</li>
                    <li class="alchemy-product-list">Integrate campaign results with tools like Google Analytics and Adobe Omniture</li>
                </ul>
            </dd>
        </dl>

我还会包含一些主要的CSS代码，这是来自alchemy-product-style.css：

.accordion-header:after{
    content: url(../img/arrow-white.png);
    padding-left: 10px;
}

dl.Zebra_Accordion dt .accordion-header{
    color: #FFF !important;
    padding: 0 !important;
}

Answer 1

好的 - 这是演示我的方法的小提琴：

http://jsfiddle.net/afpgpngo/

更改你的css以响应由Zebra设置的Zebra_AccordionExpanded样式......

dl.Zebra_Accordion dt.Zebra_Accordion_Expanded .accordion-header:after{
    content: "put link to downward facing arrow";
    padding-left: 10px;
}

dl.Zebra_Accordion dt .accordion-header:after{
    content: url(http://www.planet.nu/dev/test-2/img/arrow-white.png);
    padding-left: 10px;
}

还要确保将html更改为一致：

<dt><p class="accordion-header">Managed Services</p></dt>

和

<dt><p class="accordion-header">Licensed Services</p></dt>

（css在accordion-header类之后插入）

Answer 2

也许如果您添加以下规则：

.Zebra_Accordion_Expanded .white-arrow {
  transform: rotate(90deg); // You should prefix this accordingly to your needs.
}

支持CSS3转换is pretty good at the moment，但如果您需要支持旧浏览器，我会像jQueryUI手风琴一样。他们有一个<span>的箭头图标，然后图标的背景会根据它的状态而改变。

它看起来像这样：

HTML：

<dt class="Zebra_Accordion_Expanded">
  Licensed Services
  <span class="arrow-icon"></span>
</dt>

CSS：

.arrow-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(../img/arrow-white.png) center no-repeat;
}

.Zebra_Accordion_Expanded .arrow icon {
  background-image: url(../img/arrow-white-down.png);
}

这应该有效，但它只是一个例子。请记住，使用2个图像会创建额外的http请求，在这种情况下使用CSS Sprites将是一个更优雅的解决方案。

希望它对你有所帮助。

- FF

手风琴处于活动状态时，使箭头指向下方

2 个答案: