切换额外的 flexbox div

Question

我创建了一个共享栏并想隐藏一些不太受欢迎的选项。 问题是它是用最新最好的 flexbox 布局创建的，所以普通的 jQuery 切换不会削减它。

我该如何解决这个问题：display: none; -> display: flex; 如果有一个仅使用 css 的方式将不胜感激，但欢迎任何 jQuery 解决方案！

Here's a pen with an example of the social div. 如您所见，它形成了一个块，而不是保持线条（尝试将#more div 更改为 display: flex; 并看到魔法！）

HTML

<div class="sharing">
<div class="media facebook">
    <a href="#">
        <span class="logo fa fa-facebook"></span>
        <span class="divider"></span>
        <span class="text">Share on Facebook</span>
    </a>
    </div>
    <div class="media twitter">
    <a href="#">
        <span class="logo fa fa-twitter"></span>
        <span class="divider"></span>
        <span class="text">Share on Twitter</span>
    </a>
</div>
<div id="more" style="display: none;">
    <div class="media google">
        <a href="#">
            <span class="logo fa fa-google-plus"></span>
        </a>
    </div>
    <div class="media mail">
        <a href="#">
            <span class="logo fa fa-envelope-o"></span>
        </a>
    </div>
</div>

<div class="media more">
    <a href="#">
        <span class="logo plus">+</span>
    </a>
</div>
</div>

萨斯

// vars
$facebook: #3a559f;
$twitter: #00abf0;
$google: #d8412c;
$mail: #ccc;
$more: #eee;
$white: #fff;
$bold: bold;
$border-radius: 4px;

.plus { color: #000; }
.minus { color: #000; }

.sharing {
display: flex;
justify-content: center;
padding: 30px 0;

font-size: 11px;
font-weight: $bold;

.media {
    margin: 0 5px;
    min-width: 38px;
    border-radius: $border-radius;

    &.facebook {
        background-color: $facebook;

        .divider {
            background-color: #344c8f;
        }
    }
    &.twitter {
        background-color: $twitter;

        .divider {
            background-color: #009ad8;
        }
    }
    &.google {
        background-color: $google;
    }
    &.mail {
        background-color: $mail;
    }
    &.more {
        background-color: $more;
    }

    a {
        display: flex;
        align-items: center;
        height: 38px;
        color: $white;
        text-decoration: none;

        .logo {
            display: flex;
            justify-content: center;
            flex: 1;
            padding: 0 10px;

            font-size: 17px;
        }
        .divider {
            width: 1px;
            height: 38px;
            display: inline-block;
        }
        .text {
            padding: 0 10px;
        }
    }
}
}

JS

$('.more').click(function() {
    $('#more').toggle( function() {
        $('.more span').toggleClass('plus minus');
    });
});

Answer 1

我不知道我是否正确理解了您的问题。我在 codepen 上尝试了这个 - 它似乎工作正常 - 但是由于某种原因我不能在那里分叉/保存我的解决方案。

唯一的变化是我添加了

#more {
  display:flex;
}

在分享中。

看看这个 jsfiddle：http://jsfiddle.net/y23mp1tc/

Answer 2

更改这些类中的 css

&.google {
  background-color: $google;
  display: inline-block;
}
&.mail {
  background-color: $mail;
  display: inline-block;
}

希望这会对你有所帮助。