0

我有一个带有四个按钮的导航和一个包含 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>
                <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>

我知道我目前拥有它，如果一个按钮被选择两次，功能点击的脚本只会重复我尝试搜索这种类型的示例，但我通常会导致幻灯片等。

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 回答