Question

试图滑动显示一个div，但似乎有一个抖动或div不会内联由于显示：块或其他东西。我想要的是当我点击“分享”按钮时，带有社交图标的div会在“共享”按钮旁边顺畅显示。有人请说清楚。提前谢谢。

Codepen： http://codepen.io/rezasan/pen/XjgppW

下面的代码段示例

    $('.social').click(function(){
        $('.social-icons').toggle("slide");
    });

    .social {
        display: inline-block;
        height: 47px;
        color: #58585b;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 47px;
        padding: 0px 20px;
        border: 1px solid rgba(88,88,91,0.5);
        transition:width .2s ease;
        -webkit- transition:width .2s ease;
    }

    .social-icons {
        display: inline-block;
        height: 47px;
        color: #58585b;
        font-family: "freight-text-pro",sans-serif;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 47px;
        padding: 0px 20px;
        border: 1px solid rgba(88,88,91,0.5);
        margin-left: -5px;
        display:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
    <a>SHARE</a>
    </div>
    <div class="social-icons">
    <a>FB</a>
    <a>TW</a>
    <a>G+</a>
    <a>WS</a>
    </div>

Answer 1

使用Float:left更新 Css 。

＆＃13;

$('.social').click(function(){
    $('.social-icons').toggle("slide");
});

＆＃13;

.social {
    display: inline-block;
    height: 47px;
    color: #58585b;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 47px;
    padding: 0px 20px;
    border: 1px solid rgba(88,88,91,0.5);
    transition: width .2s ease;
    float: left;
}
.social-icons {
    display: inline-block;
    height: 47px;
    color: #58585b;
    font-family: "freight-text-pro",sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 47px;
    padding: 0px 20px;
    border: 1px solid rgba(88,88,91,0.5);
    /* margin-left: -5px; */
    display: none;
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
    <a>SHARE</a>
</div>
<div class="social-icons">
    <a>FB</a>
    <a>TW</a>
    <a>G+</a>
    <a>WS</a>
</div>

＆＃13;

Answer 2

将.social，.social-icons的display属性更改为float:left。继承人工作Fiddle

Answer 3

更改

display: inline-block;

到

float: left;

Answer 4

我不是说我同意你的技术，但这应该可以解决问题：

.social{
  display: block;
  width:46px;
  height: 47px;
  color: #58585b;
  font-family: "freight-text-pro",sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 47px;
  padding: 0px 20px;
  border: 1px solid rgba(88,88,91,0.5);
  transition:width .2s ease;
  -webkit- transition:width .2s ease;
  float:left;
}

.social-icons{
  display:none;
  width:100px;
  height: 47px;
  color: #58585b;
  font-family: "freight-text-pro",sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 47px;
  padding: 0px 20px;
  border: 1px solid rgba(88,88,91,0.5);
  margin-left: 88px;
}

在内联位置显示div

4 个答案: