0

4つのボタンがあるナビゲーションと4つのセクションがあるセクションがあります。ナビゲーションボタンをクリックすると「セクション」がスライドアウトし、別のセクションを選択すると前のトレイがスライドインし、クリックしたトレイがスライドアウトします。しかし、私が抱えている問題は、現在選択されているボタンを再度選択して、そのトレイをスライドさせて戻すことです。コードが少し面倒であることはわかっていますが、ヘルプは間違いなく素晴らしいでしょう。

$(function hideDrawers() {
            if($('#contentwrapper section').css('left') != '-800px'){
                $('#contentwrapper section').animate({left: "-800px"}, 500);
                }
            Active = null;
            });

        $(function() {
            var $one = $("#content1");
            var $two = $("#content2");
            var $three = $("#content3");
            var $four = $("#content4");

        $("#specials").click(function() {
            $('#contentwrapper section').animate({left: "-800px"}, 500);
            $one.animate({left: "0px"});
          }); 

        $("#lookup").click(function() {
            $('#contentwrapper section').animate({left: "-800px"}, 500);
            $two.animate({left: "0px"});
          });

        $("#recipe").click(function() {
            $('#contentwrapper section').animate({left: "-800px"}, 500);
            $three.animate({left: "0px"});
          });   

         });

NAV

<nav>
                <span id="logo">
                <img src="img/logo.png" />
                </span>
                <span class="nav">
                    <ul>
                        <a href="#" id="specials" ><span class="wedge"></span><li class="special"><span></span><p>Daily Specials</p></li></a>

                        <a href="#" id="lookup"><span class="wedge"></span><li class="lookup"><span></span><p>Product Lookup</p></li></a>

                        <a href="#" id="recipe"><span class="wedge"></span><li class="recipes"><span></span><p>Recipes</p></li></a>

                        <a href="#" id="pharmacy"><span class="wedge"></span><li class="pharmacy"><span></span><p>Pharmacy</p></li></a>
                    </ul>
                </span>
            </nav>

トレイのセクション

<section id="contentwrapper">
                <!--<img src="img/content-bg.png" />-->
                <section id="content1" class="contentbg">
                    <div id="slides">
                        <div class="slides_container">
                            <a href="#"><img src="img/slides/image1.jpg" width:"570" height="270"></a>
                        </div>
                        <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                        <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
                    </div>
                </section>
                <section id="content2" class="contentbg">
                </section>
                <section id="content3" class="contentbg">
                </section>
                <section id="content4" class="contentbg">
                </section>
            </section>

ボタンを2回選択すると、関数クリックのスクリプトが繰り返されることを現在知っています。このタイプの例を検索してみましたが、通常はスライドショーなどになります。

4

1 に答える 1

0

理解した。

 $("#specials").click(function() {
            if($one.css('left') != '0px') {
            $('#contentwrapper section').animate({left: "-800px"}, 500);
            $one.animate({left: "0px"});
            }
            else if($one.css('left') != '-800px') {
                $one.animate({left: "-800px"});
            }
          });
于 2012-08-07T20:17:39.233 に答える