手风琴菜单有一个跳跃的过渡

Question

我有一个问题，手风琴菜单在我的 codepen 上看起来不错，但是当我在我的网站上实际实现手风琴菜单时，它有一个跳跃的过渡。您可以查看下面的代码笔：

https://codepen.io/tiffany-koval/pen/OJRVKGp

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #fff;
    font-family: "Avenir Next Demi Bold";
  font-size: 13px;
  letter-spacing: 3px;
  line-height: auto;
}

ul {
    list-style-type: none;
}

a {
    color: #000;
    text-decoration: none;
}
.line-break {
  border-bottom: 1px solid #ebebeb;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.faq h1 {
   font-family: "Avenir Next Medium";
  font-size: 24px;
  font-weight: 500px;
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  line-height: auto;
  margin-bottom: 10px;
}

.faq h2 {
  font-family: "Avenir Next Medium";
  font-size: 12px;
  font-weight: 500px;
  letter-spacing: 3px;
  margin: 0;
  text-align: center;
  line-height: auto;
  margin-bottom: 60px;
}
.faq {
  margin-top: 100px;
}


@media screen and (max-width: 720px){
    .faq {
  margin-top: 40px !important;
}
}
/** =======================
 * Accordion
 ===========================*/

 .accordion {
    width: 100%;
    max-width:800px;
    margin: 30px auto -5px;
    background: #fbfbfb;
 }

.accordion .link {
    cursor: pointer;
    display: block;
    padding: 18px 15px 18px 15px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 3px solid #fff;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li:last-child .link {
    border-bottom: 3px solid #fff;
  margin-bottom: 0px !important;
}

.accordion li i {
    position: absolute;
    top: 22px;
    left: 12px;
    font-size: 18px;
    color: #000;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 12px;
}

.accordion li.open .link {
    color: #000;
}
.accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu {
    display: none;
    background: #fbfbfb;
    font-size: 13px;
  letter-spacing: 3px;
 }

 .submenu p {
    border-bottom: 3px solid #fff;
 }

 .submenu p {
    display: block;
  font-family: "Avenir Next";
    text-decoration: none;
    color: #000;
    padding: 15px;
    padding-left: 18px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
 }

 .submenu p:hover {
    background: #fbfbfb;
    color: #000;
 }
/**
 * More FAQs
 -----------------------------*/
.accordion + .more-faqs {
  margin-top: 0px !important;
  background: none !important;
}

.fa-chevron-right {
  margin-left: 115px;
  font-size: 10px !important;
}

#more-faqs {
  font-size: 13px;
  letter-spacing: 3px;
  font-family: "Avenir Next Medium";
}

Javascript

$(function(){
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;


        var link = this.el.find('.link');

        link.on('click', {el: this.el, multiple: this.multiple},this.dropdown)
    }

    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
            $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');
        
        if(!e.data.multiple){
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        }
    
    }

    var accordion = new Accordion($('#accordion'), false);
});

我一直认为这与手风琴菜单本身的填充或高度有关，但玩弄代码并没有改变。我怎样才能使我网站上的手风琴菜单看起来更像我的 codepen？有什么想法吗？

Answer 1

在商店页面上，您在<p> 元素上有一个额外的1em 0 边距（规则.content-asset p 来自style.min.css）。与<p> 的其余部分相比，此垂直边距似乎消失并在不同的时刻重新出现，尽管边距似乎没有明显的效果。据我的测试表明，将此边距设置为0 可以消除跳动。如果您无法控制style.min.css，您可能必须覆盖它（重新定义，甚至使用!important 强制执行）。

我认为跳跃的根本原因是你在元素上有一个“目标”边距，但在同一方向上没有一个真正的“源”边距，以便过渡以自己为基础。过渡需要为每个过渡属性明确定义起点和终点。

Answer 2

我在有两个手风琴的网页上遇到了同样的问题，点击一个手风琴会上下移动另一个手风琴。涂上背景颜色后，我发现元素中的空白区域重叠。

尝试在元素上添加独特的背景颜色，以查看是否有任何元素相互重叠。如果元素的宽度和高度没有在 CSS 或 HTML 中设置，有时元素中的空白区域会重叠，并可能导致网页上的内容不经意间移动。此外，由于浮动使用，我在特定手风琴上没有顶部或底部边距。 （但是，如果在 CSS 中使用 position:fixed; 样式，然后设置边距以将其放置在您想要的位置，当您单击手风琴时不应移动）。