css切換+的符號和 -

我已經完成了純css切換和工作正常。 現在，我還在切換處於活動狀態時放置了一個代碼，它結束時顯示+符號，當它被點擊並打開時顯示符號。當它關閉時，它必須顯示+符號。如果你們有任何想法，請幫助我。我附上了示例圖像和代碼。這裏是例如圖像（http://highercodetechnologies.com/New_benners/tg.png）檢查+和 - 號css切換+的符號和 -

謝謝

代碼....

/* Clean up the lists styles */ 
ul.accordion { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Hide the radio buttons */ 
/* These are what allow us to toggle content panes */ 
ul.accordion label + input[type='radio'] { 
    display: none; 
} 

/* Give each content pane some styles */ 
ul.accordion li { 
background-color: #ffffff; 
border-bottom: 1px solid #ffffff; 
} 

/* Make the main tab look more clickable */ 
ul.accordion label { 
background-color: #33abde; 
color: #FFFFFF; 
display: block; 
padding: 10px; 
font-weight:bold; 
} 

ul.accordion label:hover { 
cursor: pointer; 
} 

    /* Set up the div that will show and hide */ 
    ul.accordion div.content { 
    overflow: hidden; 
    padding: 0 10px; 
    display: none; 
    } 

    /* Show the content boxes when the radio buttons are checked */(here I tried to do  
    that but not working.) 
    ul.accordion label + input[type='radio']:checked + div.content { 
    display: block; 
    } 

Html code 

    <ul class='accordion'> 
    <li> 
    <label for='cp-1'>Content pane 1</label> 
    <input type='radio' name='a' id='cp-1' checked='checked'> 
    <div class='content'> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac  
    turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 
amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae 
est. Mauris placerat eleifend leo.</p> 
    </div> 
</li> 

<li> 
    <label for='cp-2'>Content pane 2</label> 
    <input type='radio' name='a' id='cp-2'> 
    <div class='content'> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, 
ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
Mauris placerat eleifend leo.</p> 
    </div> 
    </li> 

<li> 
    <label for='cp-3'>Content pane 3</label> 
    <input type='radio' name='a' id='cp-3'> 
    <div class='content'> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
    turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit   
    amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae 
    est. Mauris placerat eleifend leo.</p> 
    </div> 
    </li>

來源

2013-10-02 Hardy

你想我們會爲你和**免費**寫這個？ – Itay

http://www.menucool.com/vertical/accordion-menu-css –

一種方法是這麼簡單：

ul.accordion div.content:after { 
    content: '+'; 
} 

ul.accordion label + input[type='radio']:checked + div.content:after { 
    content: '-'; 
}

當然，你可以s把它放在你想要的地方。

演示

Try before buy

來源

2013-10-02 09:36:26 insertusernamehere

thanx很多先生 – Hardy

嗯這行代碼

ul.accordion label + input[type='radio']:checked + div.content { 
     display: block; 
    }

看起來不正確的。 +是adjacent sibling selector。但input和div.content不是兄弟姐妹，而是ul.accordion的孩子。

試圖更改聲明類似

input[type='radio']:checked + .content { 
    display: block 
}

另外，如果可能的話儘量不要與你的選擇如此具體。例如，使用.content而不是div.content將允許您的css工作，如果您的HTML標記更改了一下，並且您有其他標記而不是div與類.content。

來源

2013-10-02 09:39:20 ithil

css切換+的符號和 -

回答

相關問題