0

わかりました。3つのアイコンがある固定ナビゲーションサイドバーがあります。アイコンをクリックすると、div（負のマージンで非表示）がスライドアウトします。ボタンをもう一度クリックすると、表示されているdivが非表示になります（スライドアニメーションを介して）。このアクションは、他の2つのアイコンに対して繰り返されます。

これを実行するにはさまざまな方法があり、さまざまな意見を持つ多くのサポートドキュメントがあります。.animate（{"left"： "+ = 56px"}、 "slow"）を使用して.clickを介してアクションを宣言しようとしました。また、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

それが最も簡単な方法のようです。アクセシビリティ上の理由から、否定的なテキストでそれらを非表示にすることを想定しています (対表示: なし;)。まだ行っていない場合、クリーンアップするために私ができる唯一の提案は、すべてのボタンで機能する1つの関数を作成することです。

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

あなたが見たいと思うかもしれないもう一つのことは、スクリーンリーダーで読みたいアイテムを隠すことのいくつかの進歩は、このコードを使用しています: http://snook.ca/archives/html_and_css/hiding-content-for-accessibilityあなたは否定的なidentでそれを隠しています）：

.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 に答える