Jquery 切换额外flexbox div

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

如何解决此问题：显示：无；->显示器：flex；如果有一个css的唯一方式，将受到赞赏，但任何jQuery解决方案都是受欢迎的

如您所见，它会生成一个块，而不是保留该行，请尝试将more div更改为display:flex；看看魔法

HTML

JS

---

更改这些类中的css

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

---

希望这能对你有所帮助。

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

唯一的变化是我添加了

#more {
  display:flex;
}

共享不足

---

看看这个jsfiddle:

确实解决了UI方面的问题，但它并没有解决我的主要问题。

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

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

#more {
  display:flex;
}