Question

我有两个glyphicon，我想使用slidetoggle向左侧显示信息。但是，它向下开放。请帮忙。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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以仅包含使其工作所需的内容。您也希望根据您的目的对此进行审核：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我怎样才能向左滑动？

CSS属性

1 个答案: