아코디언이 활성 상태 일 때 화살표 점을 아래로 만듭니다.

Question

나는 Zebra 아코디언을 사용하고 있습니다. 가장 좋은 것은 아니지만 구식 인 jQuery 1.5.2와 100 % 호환됩니다. 당신이 연금술에 가면

http://jqueryui.com/accordion/

이, 지금 현재 나의 페이지입니다 : 매우 같은 아코디언의 사용자 클릭이 때

어쨌든, 나는 화살표가 아래로 지적하고 싶어요 세부 정보 탭에서 당신이 두 아코디언을 확인할 수있는 것들 :

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

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입니다 : 이것은 얼룩말 아코디언의 CSS입니다

<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 : - :

,954,321

.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

이 같은 규칙을 추가 어쩌면 경우 : CSS3에 대한

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

지원 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

Answer 2

좋아, 여기 내 접근 방식을 설명하는 바이올린의 0

은 ... 얼룩말 설정 가져옵니다 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; 
} 

응답하기 위해 CSS를 변경 또한 만들

당신이 일관되게 당신의 HTML을 변경해야합니다 :

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

및

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

(아코디언 헤더 클래스 뒤에 CSS 삽입)