javascript - 我怎样才能向左滑动切换？

Question

我有两个字形图标，我想使用 slidetoggle 将信息显示在左侧。但是，它向下打开。请帮忙。

$(document).ready(function() {
  $('#show_icon,.showhide_icon').hover(function() {
    $(this).next().slideToggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
  <div class="container">
    <div class="nav-header">
      <div class="pull-right hidden-sm">
        <ul>
          <li class="listmenu">
            <div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
            <div id="categories">
              <div CLASS="showhide_icon"><a href="#" title="Login/Register" class="umMenu my-account">Login/Register</a></div>
            </div>
          </li>
          <li class="listmenu">
            <div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
            <div id="categories">
              <div CLASS="showhide_icon"><a href="#" title="Shopping Bag" class="umMenu cart">Shopping Bag</a></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

CSS 属性是这样的。

CSS 属性

.listmenu {
    float: left;
    width: auto;
    margin-right: 0;
    height: 30px;
    padding: 0 10px;
    overflow: hidden;
}
#categories {
    display: none;
    width: 200px;
}

Answer 1

slideToggle() 根据元素的高度设置动画，这就是为什么您会看到它向下打开的原因。

如果你想要一个像你在评论中链接的动画，使用 animate() 来处理元素的宽度。链接的站点正在使用溢出:隐藏并更改容器的宽度以仅显示图标或显示图标和文本。

编辑:再次查看您的问题后，更好的解决方案可能是使用 css 处理此问题:

html 被编辑为只包含完成这项工作所需的内容。您还需要出于您的目的查看此内容:

.listmenu {
  display: inline;
}

.umMenu {
  height: 16px;
  max-width: 14px;
  display: inline-block;
  overflow: hidden;
}

.listmenu:hover .umMenu {
  max-width: 500px;
  /*Can be any # of sufficient width to display all content*/
  transition: 2s;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
  <div class="container">
    <div class="nav-header">
      <div class="pull-right hidden-sm">
        <ul>
          <li class="listmenu">
            <a href="#" title="Login/Register" class="umMenu my-account glyphicon glyphicon-shopping-cart">Login/Register</a>
          </li>
          <li class="listmenu">
            <a href="#" title="Login/Register" class="umMenu my-account glyphicon glyphicon-shopping-cart">Shopping bag</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>