2014-09-26 51 views
0

我按照实现这个简单的jQuery手风琴的指示,但是,它在网页上看起来很乱。如果你去炼金术详情选项卡你会看到斑马手风琴在行动。 http://www.planet.nu/dev/test/product-page.html修复斑马手风琴

这是非常混乱的,但如果您尝试打开检查您的网络浏览器(Firefox RO铬)元素它自我修复!但是,当你刷新页面时,它将恢复到其凌乱的布局。

我不确定我的html是坏了还是css。

<dl class="Zebra_Accordion"> 
 
\t \t <dt>Managed Services</dt> 
 
\t \t \t <dd> 
 
\t \t \t \t <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> 
 
\t \t \t \t <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> 
 
\t \t \t \t \t <ul class="alchemy-product-list-subnav"> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Full campaign management, from goal setting/strategy through to delivery and reporting </li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Dedicated Account Managers</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Targeting and segmentation planning</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Custom built creative generation on demand (image and copy)</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Daily optimisation</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Regular reporting</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Campaign review</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Access to Experian’s unique and proprietary data assets to improve campaigns</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </dd> 
 
\t \t <dt>Licensed Services</dt> 
 
\t \t \t <dd> 
 
\t \t \t \t <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> 
 
\t \t \t \t <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> 
 
\t \t \t \t <p><span>Alchemy SaaS</span></p> 
 
\t \t \t \t <p>Licensing the Alchemy Social Platform brings access to the full range of features of the Facebook ads manager platform, including:</p> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Guidance on how to create, manage, report on and optimise campaigns </li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Access to regular webinars on new releases, features and best practices </li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Dedicated account management support and consultative advice </li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Create campaign rules for real-time cost per acquisition (CPA) optimisation</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Effectively refine activity at various points of the campaign cycle</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Control ad spend at segment level by location or target group</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Analyse conversion data and integrate with other analytical tools</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">View real-time reporting to understand CPA and conversion rates at ad level</li> 
 
\t \t \t \t \t \t <li class="alchemy-product-list">Integrate campaign results with tools like Google Analytics and Adobe Omniture</li> 
 
\t \t \t \t \t </ul> \t 
 
\t \t \t \t </dd> 
 
\t \t </dl>
这是我的CSS来回斑马手风琴:
dl.Zebra_Accordion { width: 100%; font-family: Arial, sans-serif; font-size: 12px; } 
 
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px; } 
 
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0; } 
 
    
 
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000; }
我的jQuery的斑马手风琴:
<script> 
 
$(document).ready(function() { 
 
    var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion', { 
 
     'collapsible': true 
 
    }); 
 
}); 
 
</script>

+0

我已经注意到,这是我的CSS使布局凌乱。我仍在测试它。 – 2014-09-26 16:50:23

回答

0

那么,既然没有人回答我的问题,我发现我只是需要更改CSS。它可能不是那里最好的手风琴,但它对于jQuery 1.5.2很有效,因为很多手风琴插件都失败了。

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

而且,所以我用这个代替了jQuery段没有发挥出来得好:

$(document).ready(function() { 
 
    new $.Zebra_Accordion($('.Zebra_Accordion')); 
 
});