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上。

对不起，我不能给你一个确切的答案，但我希望这可以帮助你找出问题

CSS添加第二个droppanel

1 个答案: