不同浏览器中的“ Border-Bottom-Bottom”面板

美智

我有以下jQuery手风琴,我想在其中打开多个部分:

$(document).ready(function() {
  $(".accordion").accordion({
    collapsible: true,
    active: false,
    animate: 500,
  }).on("click", "div", function(e) {
    $("div.ui-accordion-header").each(function(i, el) {
      if ($(this).is(".ui-state-active")) {
        $(this).find(".panel-icon").html("-")
      } else {
        $(this).find(".panel-icon").html("+")
      }
    })
  });

});
.accordion {
  float: left;
  line-height: 2.0;
  width: 100%;
}
.js_button {
  width: 99%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  margin-top: 1%;
  outline-width: 0;
}
.panel {
  width: 99%;
  height: 20%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 1px;
}
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

</head>

<body class="body">


  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part1</div>
    <span class="panel">
        					<p>Content1</p>
        					</span>
  </div>

  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part2</div>
    <span class="panel">
        					<p>Content2</p>
        					</span>
  </div>
</body>

</html>

手风琴本身可以正常工作,但是当我使用ChromeSafariOpera时,面板(内容)的边框底部存在以下问题:

当我单击“按钮”并且面板滑出时,边框的底部不存在。在幻灯片动画的最后,最终绘制了无聊的底部。我该如何避免这种情况,并从动画开始像在Firefox和IE中那样在动画的开头放下边框?

谢谢你的帮助 :-)

邪恶意志

尝试将边框添加到.accordiondiv中,然后删除其他边框:

JSFiddle

.accordion {
    float: left;
    line-height: 2.0;
    width: 100%;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
     margin-top: 1%;
}
.js_button {
    width: 99%;
    padding-left: 1%;
    font-weight: bold;
    outline-width: 0;
    position: relative;
}
.js_button:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}
.panel {
    width: 99%;
    height: 20%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}

注意,您的动画非常生涩-主要是因为您使用跨度作为面板。将其切换为div(或将span设置为display:block),动画应如上所述平滑。

同样,:after以上内容适用于按钮上的边框底部。在按钮上添加一个标准的border-bottom只会使边框加倍,因此必须采用这种方式。当然有更好的方法,但是当我不那么累的时候我会回来的:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ol.style.stroke中的不同颜色border-bottom

为什么.border-0在Bootstrap 4.0.0中覆盖.border-bottom

如何让tr border-bottom-bottom而不是td

填充前的css border-bottom

Border Radius Bottom Bug React Native

绝对列未显示border-bottom

在tr标签下添加border-bottom

使用默认的移动浏览器时,引导程序中的navbar-bottom不会位于底部

为什么当border-bottom-style等于'none'时指定border-bottom-color?

在链接悬停时在CSS过渡上应用border-bottom

css避免在:after上使用border-bottom

将border-bottom添加到表行<tr>

CSS li列带有border-bottom错误?

R DT:datatable删除.no-footer border-bottom

不确定如何在CSS中使用border-bottom

HTML5 border-bottom显示错误(?)

删除 <li> 内 <span> 的 border-bottom nth-child

当鼠标悬停时,CSS border-bottom-bottom应该扩展

防止HTML / CSS-Navbar在使用border-bottom-bottom时改变高度

当我在表格中列出PHP结果时,如何在数据更改时更改border-bottom-color?

无法将border-top和border-bottom应用于<tr>标记

padding-bottom无法正常工作。我正在Chrome浏览器中进行测试

devtools中的bottom-bottom是什么意思?

为什么在应用小数高度时,css border-bottom不会在这些内联div中显示?(仅Chrome)

根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius

处理背景色叠加层时,border-bottom无法正常工作

CSS-是否可以将border-bottom设置为与不关联的类相同的大小?

如何将 border-bottom 应用于最后一个非空 <tr>?

.Bottom 是只读的