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

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

托盘与jQuery |再次单击时关闭托盘

1 个答案: