4

私はコーディングが初めてで、jQuery の助けが必要です。私は 2 つ<div>の s (1 つは画像付き、もう 1 つはメニュー リスト付き、どちらも幅 50%) を持っており、メニュー オプションの 1 つをクリックして新しい div (幅 50%) を右から表示できるようにする必要があります。他の 2 つの div 幅をそれぞれ 25% に減らします。次に、同じメニュー オプションをクリックして新しい div を非表示にし、元の幅に戻します。しかし、新しい div が表示されているときに別のメニュー オプションをクリックすると、コンテンツをその特定のメニュー オプション コンテンツに変更する必要があります。

左手<div>をjQueryと交換するにはどうすればよいですか?

私が扱っているHTMLは次のとおりです。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
     <!-- SCRIPT FILES -->    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="script.js"></script>     
     <!-- CSS STYLESHEETS -->    
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />    
</head>
<body>
    <div id="wrapper">    
        <div id="header">        
        </div><!--header-->        
            <div id="container">        
                <div class="box-container">                
                    <div class="box1">                    
                        <img src="images/Untitled-1.png" alt="logo">                    
                    </div>                    
                    <div class="box2">                    
                        <div id="nav">                        
                            <ul>                            
                                <li><a>hello!</a></li>                                
                                <li><a>ADVERTISING</a></li>                                
                                <li><a>DESIGN</a></li>                                
                                <li><a>ABOUT</a></li>                                
                                <li><a>BLOG</a></li>                                
                                <li><a>SHOP</a></li>                                
                            </ul>                            
                        </div><!--nav-->                        
                    </div><!--box2-->                    
                    <div class="box3">                    
                        <div id="ADVERTISING" class="content">ADVERTISING</div>                        
                        <div id="DESIGN" class="content">DESIGN</div>                        
                        <div id="ABOUT" class="content">ABOUT</div>                        
                        <div id="BLOG" class="content">BLOG</div>        
                        <div id="SHOP" class="content">SHOP</div>                    
                    </div>                    
                </div><!--box-container-->            
            </div><!--container-->        
        <div id="footer">        
        </div><!--footer-->        
    </div><!-- wrapper-->        
</body>
</html>​

スタイルを使用した動作中の jsFiddle は次のとおりです: http://jsfiddle.net/YcphY/6/

4

2 に答える 2

1

jQuery のanimate関数が役に立つと思います。

あなたがする必要があるのは、HTMLに追加されたウィンドウの外に隠れたdivを配置し（または、必要に応じて、document.readyイベントでjqueryを使用して動的に追加することもできます）、上記のアニメーション機能を使用してスライドインし、アウトして、メニュー項目のクリック関数にバインドします。

サンプルコード

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow");
        hidden.removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow");
        hidden.addClass('visible');
    }
    });
});​

説明

上記のコードでは、 「スライド」clickを持つ要素のイベントにコードをバインドしています。id要素がクリックされると、コードが開始されます。.hiddenに「visible」という名前の css クラスがあるかどうかを確認します。そうでない場合は、非表示の div をスライド インするようにアニメーション化します。可視クラスがある場合は、スライド アウトします。

働くフィドル

ここにあなたのために働くJSFiddleがあります

いくつかの指針

  • 非表示の div の CSS で、現在の左側のパネルよりも大きい z-index を指定することを忘れないでください。
  • 非表示の div の CSS では、前後に設定positionすることabsoluteを忘れないでください (または、window.width() より大きくして、すべての画面サイズで機能するようにします)。left-1200px
于 2012-12-21T21:15:32.437 に答える
1

手始めに、これを行う方法の以下の例を、目的のアニメーションに結び付ける方法を次に示します。

$(function() {
  $("#nav").delegate("li","click", function() {
    var newDiv = $(".box3 .content").eq($(this).index()-1);
    newDiv.siblings().hide().end(); // hide the others
    if(newDiv.is(":visible")) {
      // if shown, fade it out, when the fade finishes, slide everything back
      newDiv.fadeOut(function() { 
        $(".box3").hide(); 
        $(".box1, .box2").animate({ width: "50%" });
      });
    } else {
      // if not shown, then slide over space, then fade in
      $(".box1, .box2").animate({ width: "25%" }, function() {
        $(".box3").show();
        newDiv.fadeIn("fast");
      });
    }
  });        
});​

現在の CSS を考えると、これを行うことができます。

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + $(this).text()).show().siblings().hide();
    });        
});​

これは実際の例ですが、CSS を 100% 動作させるには少し作業が必要であることがわかります。ただし、いくつかの変更をお勧めします。次のように、リンクとコンテナーに一致する ID を指定します。

<li><a id="ad">ADVERTISING</a></li> 

<div id="ad-container" class="content">ADVERTISING</div>

次に、JS は次のようになります。

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + this.id + "-container").show().siblings().hide();
    });        
});

これはその実際の例です...テキストを自由に変更でき、後でJSが壊れることを心配する必要はありません。別の代替手段として、 を使用してリスト内のリンクのインデックスから外れる方法が.index()あります。これは、「hello!」のためにオフセットがあったとしても、すべての場合<li>でリンクの数が s と一致していた場合です。<div>リンク。

現在の HTML を使用したインデックス アプローチの例を次に示します。

$(function() {
    $("#nav").delegate("li","click", function() {
        $(".box3").show();
        $(".box3 .content").hide().eq($(this).index()-1).show();
    });        
});​
于 2012-12-21T20:54:45.737 に答える