我正在使用Zebra手风琴。不是那里最好的,但它与jQuery 1.5.2完全兼容,显然已经过时了。当手风琴激活时,箭头指向下方
无论如何,我想的箭头指向下当上了手风琴用户点击,很喜欢这样的:
http://jqueryui.com/accordion/
这是目前我的页面,现在,如果你去炼金术在详细标签,你会发现这两个手风琴有:
http://www.planet.nu/dev/test-2/product-page.html
这是斑马手风琴的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代码为好,这是从炼金术 - 产品世界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;
}
这是我个人做到这一点,吉特的方式。但我认为它会偏离理查德已经实施的东西。好的,反正。 :) – fabiofl 2014-09-26 19:25:53