0

我已经完成了纯 css 切换并且工作正常。现在我还输入了一个代码，当切换处于活动状态时它结束显示+符号，当它单击并打开它时显示符号-。关闭时相同，它必须显示+号。如果你们有任何想法，请帮助我。我附上了示例图像和代码。这里是图像例如 ( http://highercodetechnologies.com/New_benners/tg.png ) 签出+ 和 - 符号

谢谢

代码....

/* 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>

4

2 回答 2

1

嗯这行代码

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

看起来不对。+是一个相邻的兄弟选择器。但是input和div.content不是兄弟姐妹，而是 的孩子ul.accordion。

尝试将声明更改为类似

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

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

于 2013-10-02T09:39:20.353 回答
0

一种方法很简单：

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

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

当然，您可以根据需要设置样式和放置位置。

演示

先试后买

于 2013-10-02T09:36:26.890 回答