Question

当您点击手机或电子邮件图标时，我正尝试在此标题中创建与此网站上的https://glenner.org/相同的效果，将其切换为要隐藏的隐藏文字。因此，当您单击电话图标时，文本会在手机和电子邮件图标之间滑动。

到目前为止，我有这个：

<div id="clickable" style="float:left; cursor:pointer; color: red"><i class="fa fa-phone"></i></div> 
<div id="hidden" style="display:none; white-space:nowrap;">Phone Number</div>

<div id="clickable2" style="float:left; cursor:pointer; color: red"><i class="fa fa-envelope"></i></div> 
<div id="hidden2" style="display:none; white-space:nowrap;">Email Here</div>

//

$('#clickable').click(function() {
    $('#hidden').animate({width:'toggle'},350);
});

$('#clickable2').click(function() {
    $('#hidden2').animate({width:'toggle'},350);
});

截至目前，当我点击其中一个链接时，它会转到下一行，我确定我缺少一些css样式来解决这个问题？

这是我为其设置的JsFiddle：http://jsfiddle.net/804jeg82/412/

Answer 1

我会稍微清理你的代码，把隐藏的div放在可点击的div中。使用CSS来控制动画并使用类而不是id。

但这只是个人偏好。

＆＃13;

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

＆＃13;

.clickable .fa {
  cursor: pointer;
  color: red
}
.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: 180px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<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>

＆＃13;

Answer 2

您需要将float:left添加到hidden div

具体做法是：

<div id="hidden" style="display:none; white-space:nowrap; float:left">Phone Number</div>

您可能还希望考虑将HTML和CSS分开，例如，如果您使用了ID，则可以执行以下操作：

HTML

<div id="hidden">Phone Number</div>

CSS

#hidden {
   display:none;
   white-space:nowrap;
   float:left;
}

隐藏元素在另一个元素之间滑动

2 个答案: