jquery - 使用 JQuery/CSS 将面包屑从页面左侧滑出

Question

我正在开发一个应用程序的移动 View ，该应用程序的面包屑需要从屏幕左侧开始，然后随着面包屑的添加，将当前的面包屑推到左侧，然后最终离开屏幕.如果此人返回该应用，则当前应用将被删除。

我把它放在它工作的地方，但面包屑从右边开始(它能走的最远的地方。

function update_crumbs(){
  $('.crumbs').empty();
  $.each(crumbs,function(key,value){

    if(value!==''){
      let is_active = (key + 1 === crumbs.length) ? 'active' : '';
      $('.crumbs').append(' <span class="connector ' + is_active+ '"></span><span class="crumb ' + is_active+ '" data-index="0"> '+ value +'</span>');
    }
  })
}

.crumbs-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 80px;
}
.crumbs-container .crumbs {
  margin: 20px 0;
  padding: 13px 0;
  position: absolute;
  right: 10px;
}

<div class="crumbs-container">
  <div class="crumbs"> 
    <span class="crumb active" data-index="0"> Appointment</span>
  </div>
</div>

然后 JS 只是在人向前移动时添加/附加一个面包屑。谢谢，让我知道您是否能看出我做错了什么或如何修改它，以便它从左侧开始工作，并在到达屏幕右侧时插入。

Answer 1

您需要为面包屑添加左侧位置而不是右侧 0px

.crumbs-container .crumbs {
     right: auto;
     left: 0;
}

.crumbs-container {
    white-space: normal;
}