javascript - 在动态宽度侧边栏中将元素保持在同一行

Question

我正在尝试为网页创建侧边栏。现在我希望侧边栏可以通过动画折叠，但我找不到保持 <img> 的方法。和 <span>折叠时在同一行，因为两个标签的宽度都超过了侧边栏的宽度。

我尝试了所有我能想到的，玩过float , display , overflow等

这是一个快速 JSFiddle给你一个想法。

function toggleSidebar() {
  $('#sidebar, #mainContent').toggleClass('expanded');
  $('#sidebar, #mainContent').toggleClass('collapsed');

  if ($("#sidebar").hasClass("collapsed"))
    $("#toggler a").html(">>");
  else
    $("#toggler a").html("<<");
}

#mainContent {
  background-color: #0f0;
}

#sidebar {
  background-color: #00f;
}

img {
  vertical-align: middle;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

ul.nav-sidebar {
  width: 100%;
  padding: 0px;
}

#toggler a {
  float: right;
}

ul.nav-sidebar {
  width: 100%;
}

ul.nav-sidebar li {
  width: 100%;
  display: inline-block;
}

ul.nav-sidebar li,
ul.nav-sidebar li a {
  color: white;
  font-weight: bold;
}

.ar-icon {
  width: 50px;
}

#sidebar ul li span {
  padding-left: 10px;
}

#sidebar.collapsed ul li span {
  /*display: none;*/
}

#mainContent,
#sidebar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#sidebar,
#mainContent {
  float: left;
  height: 100%;
}

#mainContent.expanded {
  width: calc(100% - 80px);
}

#mainContent.collapsed {
  width: calc(100% - 200px);
}

#sidebar.expanded {
  width: 200px;
}

#sidebar.collapsed {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <div class="expanded" id="sidebar">
    <ul class="nav nav-sidebar">
      <li id="toggler" onclick="toggleSidebar();"><a>&lt;&lt;</a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a></li>
    </ul>
  </div>
  <div class="collapsed" id="mainContent">Dummy content</div>
</div>

Answer 1

Flexbox 可以简单地做到这一点:

ul.nav-sidebar li a {
  display: flex;
  align-items: center;
}

jsFiddle

function toggleSidebar() {
  $('#sidebar, #mainContent').toggleClass('expanded');
  $('#sidebar, #mainContent').toggleClass('collapsed');

  if ($("#sidebar").hasClass("collapsed"))
    $("#toggler a").html(">>");
  else
    $("#toggler a").html("<<");
}

#mainContent {
  background-color: #0f0;
}

#sidebar {
  background-color: #00f;
}

img {
  vertical-align: middle;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

ul.nav-sidebar {
  width: 100%;
  padding: 0px;
}

#toggler a {
  float: right;
}

ul.nav-sidebar {
  width: 100%;
}

ul.nav-sidebar li {
  width: 100%;
  display: inline-block;
}

ul.nav-sidebar li,
ul.nav-sidebar li a {
  color: white;
  font-weight: bold;
}

.ar-icon {
  width: 50px;
}

#sidebar ul li span {
  padding-left: 10px;
}

#sidebar.collapsed ul li span {
  /*display: none;*/
}

#mainContent,
#sidebar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#sidebar,
#mainContent {
  float: left;
  height: 100%;
}

#mainContent.expanded {
  width: calc(100% - 80px);
}

#mainContent.collapsed {
  width: calc(100% - 200px);
}

#sidebar.expanded {
  width: 200px;
}

#sidebar.collapsed {
  width: 80px;
}

ul.nav-sidebar li a {
  display: flex;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <div class="expanded" id="sidebar">
    <ul class="nav nav-sidebar">
      <li id="toggler" onclick="toggleSidebar();"><a>&lt;&lt;</a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a></li>
    </ul>
  </div>
  <div class="collapsed" id="mainContent">Dummy content</div>
</div>