css切换符号为+和-

Question

我已经完成了纯粹的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>

​

Answer 1

嗯，这一行代码

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

看上去不太对劲。+是邻接同胞选择器。但是input和div.content不是兄弟姐妹，而是ul.accordion的孩子。

尝试将声明更改为

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

此外，如果可能的话，尽量不要对你的选择器如此具体。例如，使用.content而不是div.content将允许您的div工作，如果您的HTML发生了一些变化，并且您有一些其他标记，而不是带有类.content的div。

Answer 2

有一种方法很简单：

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

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

当然，你可以把它的风格，并放置在你想要的。

Demo

买前试一试