2014-09-26 2 views
0

이 간단한 jQuery 아코디언 구현에 대한 지침을 따라 왔지만 웹 페이지에서 지저분 해 보입니다. Alchemy in Detail Tab로 이동하면 Zebra Accordion이 작동하는 것을 볼 수 있습니다. http://www.planet.nu/dev/test/product-page.htmlZebra Accordion 고정

그것은 매우 지저분하지만 당신은 웹 브라우저 (파이어 폭스 RO 크롬)에 요소 검사 열어보십시오 경우 그 자체를 해결! 하지만 페이지를 새로 고침하면 지저분한 레이아웃으로 되돌아갑니다.

내 HTML이 손상되었거나 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를 얼룩말에서 아코디언 :
<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는 아무도 내 질문에 대답하지 않으므로
<script> 
 
$(document).ready(function() { 
 
    var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion', { 
 
     'collapsible': true 
 
    }); 
 
}); 
 
</script>

+0

나는 내 CSS입니다 것으로 나타났습니다 그 지저분한 레이아웃을 만들었습니다. 나는 여전히 그것을 테스트하는 중이다. –

답변

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')); 
 
});