javascript - 隐藏元素文本向左滑动

Question

因此，如果您访问此站点:https://glenner.org/然后单击标题中的图标，我希望它具有与此相同的效果。我想要它做的是，当我点击图标时，我希望图标向左滑动，而不是将另一个图标向右移动。

这是我目前所拥有的:

//脚本

$(document).ready(function(){
    $('.clickable').on('click' , function() {
      $(this).find('.hid').toggleClass('showme');
    });
});

//CSS

.clickable .fa {
  cursor: pointer;
  font-size: 30px;
  color: #394461; 
}
.clickable .fa, .hid {
  float: left;
}

.hid {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all ease .35s;
  -webkit-transition: all ease .35s;
  -moz-transition: all ease .35s;
}

.showme {
  width: 150px; 
}

//html

<div class="clickable"><i class="fa fa-phone"></i>
  <div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
  <div class="hid">Email Here</div>
</div>

这是 JSFiddle:http://jsfiddle.net/804jeg82/414/

这里是 MY SITE供引用

Answer 1

尝试将您的 html 更改为以下内容:

<div class="clickable"> 
    <div class="hid">Phone Number</div>
    <i class="fa fa-phone"></i>
</div>
<div class="clickable">
    <div class="hid">Email Here</div>
    <i class="fa fa-envelope"></i>
</div>

这将允许元素从左侧而不是右侧滑出。 (如果这就是你在这里问的)