html - CSS 添加第二个下拉面板

Question

所以我一直在尝试在完成以下操作后添加第二个下拉面板: http://www.dynamicdrive.com/style/csslibrary/item/pure_css3_push_down_panel/

我可以添加第二个下拉面板，但我想知道如何在不影响第一个下拉面板的情况下更改第二个下拉面板的图像。

这是我的标题:

<style type="text/css">

div.css3droppanel { /* Main wrapper for push down panel */
  position: relative;
  margin: 0;
  margin-bottom: 2em; /* margin with rest of content on page */
  }


div.css3droppanel > div { /* Content DIV DIV inside wrapper */
  height: 100px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
  padding: 5px;
  -moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff; /* background of content DIV */
  position: relative;
  opacity: 0;
    -moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
    -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
  }

div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */
  position: absolute; 
  width: 60px; /* width of checkbox */
  height: 100px; /* height of checkbox */
  bottom: -34px; /* bottom offset of checkbox */
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  }

div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
  height: 500px; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
  opacity: 1;
  overflow: auto;
  }

div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */
  position: absolute; 
  width: 60px; /* width of label */
  height: 100px; /* height of label */
  bottom: -34px; /* bottom offset of label */
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  z-index: 5; 
  }

  /* for label 1 [WIP] */
div.css3droppanel label:after {
  content:url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg); 
  position: absolute;
  display: block;
  width: 0;
  height: 0; 
  top: 18px; 
  }

</style>

<!--[if lte IE 8]>

<style>

/* Hide panel from IE8 and below */

div.css3droppanel {
  display: none;
  }


</style>

<![endif]-->

内容如下:

<div class="css3droppanel">
<input type="checkbox" id="droptoggle" />
<label for="droptoggle" title="Click to open Panel"></label>
<div class="content">
<p>
the first drop panel
</p>
</div>
</div>

<div class="css3droppanel">
<input type="checkbox" id="droptoggle" />
<label for="droptoggle" title="Click to open Panel"></label>
<div class="content">
<p>
the second drop panel
</p>
</div>
</div>

单击其中一个面板将打开同一组文本(第一个下拉面板)，但我希望它们分别用于每个功能。 谢谢。

Answer 1

我已经运行了你的代码，只要你直接点击输入复选框，你的面板就会独立运行。

单击任一图像时发生的情况是，输入被视为顶部复选框的开关，而不是您希望它与之关联的复选框。这让我相信问题出在 div.css3droppanel label 或 div.css3droppanel label:after 上。

对不起，我不能给你一个确切的答案，但我希望这能帮助你查明问题