Question

我掀起了一个模拟问题的小提琴here或使用下面的片段。正如您在按箭头按钮时所看到的那样，背景颜色会挤回原来的形状。它会丢失填充/边距值。

有没有办法来抑制或解决这种行为？

编辑：只是为了澄清，这是HTML创建输出的一部分。我为DIV添加了边框。如您所见，背景使div边界处于打开状态。当切换触发时，移除了放置在边框外部的背景颜色。

$(".togglebutton").click(function(event) {
  $(event.target).toggleClass("down up")
  $(this).parent().next(".list").slideToggle(500)
});

.background2nd {
  background: rgb(254, 254, 254);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(254, 254, 254, 1) 0%, rgba(254, 254, 254, 1) 0%, rgba(219, 219, 219, 1) 39%, rgba(209, 209, 209, 1) 100%, rgba(226, 226, 226, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 254, 254, 1)), color-stop(0%, rgba(254, 254, 254, 1)), color-stop(39%, rgba(219, 219, 219, 1)), color-stop(100%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(226, 226, 226, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(254, 254, 254, 1) 0%, rgba(254, 254, 254, 1) 0%, rgba(219, 219, 219, 1) 39%, rgba(209, 209, 209, 1) 100%, rgba(226, 226, 226, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(254, 254, 254, 1) 0%, rgba(254, 254, 254, 1) 0%, rgba(219, 219, 219, 1) 39%, rgba(209, 209, 209, 1) 100%, rgba(226, 226, 226, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(254, 254, 254, 1) 0%, rgba(254, 254, 254, 1) 0%, rgba(219, 219, 219, 1) 39%, rgba(209, 209, 209, 1) 100%, rgba(226, 226, 226, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(254, 254, 254, 1) 0%, rgba(254, 254, 254, 1) 0%, rgba(219, 219, 219, 1) 39%, rgba(209, 209, 209, 1) 100%, rgba(226, 226, 226, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0);
  /* IE6-9 */
}
.background1st {
  background: rgb(248, 255, 232);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(248, 255, 232, 1)), color-stop(33%, rgba(227, 245, 171, 1)), color-stop(100%, rgba(183, 223, 45, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#b7df2d', GradientType=0);
  /* IE6-9 */
}
.backgroundlist {
  margin-left: -15px;
  padding-left: 15px;
  margin-right: -15px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 0px;
}
.arrow {
  border: 5px solid #444;
  font-size: 0;
  line-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
}
.arrow.down {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.arrow.up {
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  position: relative;
  top: -7px;
}
.arrow.left {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.arrow.right {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Meine Events&nbsp;&nbsp;<span class="arrow down togglebutton"></span></h2>
<div class="list" style="  border: 1px solid;">
  <p class="background2nd backgroundlist">Test</p>
  <p class="background1st backgroundlist">Test</p>
  <p class="background2nd backgroundlist">Test</p>
  <p class="background1st backgroundlist">Test</p>
</div>

Answer 1

event

中缺少$(".togglebutton").click(function(event) {

试试这个：

$(".togglebutton").click(function(event) {
  $(event.target).toggleClass("down")
  $(event.target).toggleClass("up")
  $(this).parent().next(".list").slideToggle(500)
});

您缺少<a href="/yii/backend/web/index.php/site/event?id=29">的关闭代码

jQuery slideToggle和Background-Color

1 个答案: