Question

好的我有一个固定的导航栏，我有三个图标。单击图标时，div（隐藏为负边距）将滑出。再次单击该按钮时，显示的div将隐藏（通过幻灯片动画）。对于其他两个图标，将重复此操作。

我意识到执行此操作有许多不同的方法，并且有很多支持文档，其中有不同的意见。我已经尝试通过.anlick声明动作：.animate（{“left”：“+ = 56px”}，“slow”）＆amp;我还编写了触发onclick的函数。我所意识到的是，我可以轻松地使这项简单的任务变得比它需要的复杂得多。

有关最干净的执行方式的任何建议吗？

编辑：感谢大家的投入。切换，虽然它本质上是极简主义，但不是从左到右。我最终使用的脚本是：

   <?// Toolbar ?>
   <div id="toolbar">

      <img src="images/balihooGreyLogo.png" class="logo"/>

      <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a>

      <a href="#" class="locationIcon"><img src="images/locationIcon.png"  border="0"/></a>

      <a href="#" class="mediaIcon"><img src="images/mediaIcon.png"  border="0"/></a>

      <a href="#" class="save">SAVE</a>

      <a href="#" class="export">EXPORT</a>

   </div>




  <?// Text Input Slideout Box?>
   <div class="textInput">
      <h1>Email Copy</h1>

   </div>
<script>
 $('.textIcon').click(function () {
    $('.textInput').slideToggleWidth();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      $(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      $(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = $(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
</script>

Answer 1

这似乎是最简单的方法。出于可访问性原因，我假设您将其隐藏在负文本中（与display：none;相比）。我可以做的唯一建议是清理它，如果你还没有这样做，那就是编写一个适用于所有按钮的功能。

$('.icon').click(function() {
       $(this).next('.nav-item').animate({"left":"+=56px"},"slow");
)};

您可能想要看到的另一件事是隐藏屏幕阅读器要读取的项目的一些进展正在使用以下代码：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility（再次假设这就是为什么你用负面身份隐藏它）：< / p>

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

可能在回答这个问题时，但我想提一下。

使用滑块动画显示和隐藏导航元素的最佳方法是什么？

1 个答案: