jquery - 带有 jQ​​uery 的托盘 |再次单击时关闭托盘

Question

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

我知道如果一个按钮被选中两次，我现在有它，功能点击脚本将重复我尝试搜索这种类型的例子，但我通常会得到幻灯片等。

Answer 1

想通了。

 $("#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"});
            }
          });