0

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

我意识到有很多不同的方法可以执行此操作，并且有很多支持文档有不同的意见。我曾尝试通过 .click 和 .animate({"left": "+=56px"},"slow") 声明该操作，并且我还编写了触发 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>
4

1 回答 1

0

这似乎是最简单的方法。出于可访问性的原因，我假设您用否定文本隐藏它们（相对于显示：无；）。如果您还没有这样做，我可以提出的清理它的唯一建议是编写一个适用于所有按钮的函数。

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

您可能想要查看的另一件事是隐藏您希望屏幕阅读器阅读的项目的一些进步是使用以下代码：http ://snook.ca/archives/html_and_css/hiding-content-for-accessibility （再次假设这就是为什么你用否定的身份隐藏它）：

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

可能过度回答了这个问题，但我想我会提到它。

于 2012-03-26T19:49:16.520 回答