Javascript jQuery-2级别滑块单击返回到级别1

我已经修改了这个jsFiddle，使其与这个jsFiddle一样工作

当脚本第一次运行时，我称之为级别1。然后单击其中一个缩略图并移动到级别2。我想通过单击返回到运行状态（级别1）。可能是关闭按钮还是返回到第一次运行状态

我曾尝试将onclick与js一起使用，但我无法使其工作

我应该使用onlick还是可以保存jquery的状态并返回到它

这是密码

JS

HTML

<div id="container">

<div id="services_level2">
            <h1>IT Services</h1>
            <p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo. Omnis soluta periculis eu sit.
            </p>
            <h1>Repairs</h1>
            <p>
              Sit te habeo neglegentur, nam no dicit intellegat. Epicuri blandit sea eu, eum nibh adhuc mundi eu.
            </p>
            <h1>Other</h1>
            <p>
              Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea.
            </p>
        </div>        

        <div id="content">
        <!--<div id="zero"><p>Zero</p></div>-->
        <div id="one"><h1>Objective</h1><p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo.</p><h1>Delivery</h1><p>Sit te habeo neglegentur, nam no dicit intellegat. </p><h1>Performance</h1><p>Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea, est id suas delectus deseruisse.</p></div>
        <div id="two"><p>Two</p></div>
        <div id="three"><p>Three</p></div>
        <div id="four"><p>Four</p></div>
        <div id="five"><p>Five</p></div>
        <div id="six"><p>Six</p></div>
    </div>
    <ul id="nav">
        <!--<li><a href="#zero"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/0.jpg"></a>
        </li>-->
        <li><a href="#one"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/1.jpg"></a>
        </li>
        <li><a href="#two"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/2.jpg"></a>
        </li>
        <li><a href="#three"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/3.jpg"></a>
        </li>
        <li><a href="#four"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/4.jpg"></a>
        </li>
        <li><a href="#five"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/5.jpg"></a>
        </li>
        <li><a href="#six"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/6.jpg"></a>
        </li>
    </ul>                  
</div>

---

您需要梳理代码，列出第一次单击时更改的所有值，然后在单击#reset时反转每个值-=200px将变成+=200px，依此类推。

我通过添加一个按钮并为其分配一个单击功能找到了解决方案，该功能有3个操作：

滑出并淡入2级副本。这将强制缩略图移动

滑入和淡入级别1副本

删除活动的缩略图类

按钮代码：

    $('#moveleft').click(function() {
        count = 0;   

        // Slide Level 2 description back into view
        $('#services_level2').animate({
            'margin-left': '0%',
            'opacity' : "1"
        }, 800);

        // Slide Level 3 out of view. The thumbnails follow Level 3. 
        $(level3_content).animate({
            'width': '0px',
            opacity: 1
        }, 400);

        // Delete the active class
        var oldClickedElement = $('.active').removeClass('active').find('a').attr('href');

        console.log(oldClickedElement);

        //only if old click element exists the do the animation
        if (oldClickedElement) {
            //animate out + reset to start
            $(oldClickedElement).animate({
                left: 0,
                'margin-left': '-50%',
                opacity: 0
            }, 500, function() {
               $(oldClickedElement).css({
                'margin-left' : '100%',
                left: 0
            });
           });            
        }       
    });

这是JSFIDLE

---

这是一个相当不错的两级滑块。不幸的是，它还没有响应。

谢谢您的回答。不幸的是，它什么也没做。这是JSFIDLE

#container {

    height:390px;
    overflow:hidden;
    float:left;
    background: #ccc no-repeat;
    min-width:918px;
    padding: 10px 10px 10px 10px;
}

#services_level2 {
    position:fixed;
    background:white;
    padding:20px;
    height: 345px;
}


#content {
    width: 650px;
    height: 385px;
    position: relative;
    overflow: hidden;
    float: right;
}
#content > div {
    display:block;
    width:600px;
    height:385px;
    background:white;
    position:absolute;
    margin-left:100%;
    /*left:-200px;*/
    opacity: 0;
    padding:10px 20px 0 40px;
}
#nav {
    list-style: none;
    display: table;
    margin: 0px 0 0 0;
    position: relative;
    width: 260px;
    float:right;
}
#nav li {
    /* width: 100px; */
    /* height: 100px; */
    float: left;
    margin-right:5px;
    /*border: 1px solid black;*/
}
#nav a {
    color:#fff;
    text-decoration:none;
    width:100%;
    height:100%;
}
ul {
    padding:0;
}
li.active {
    opacity:0.4;
    filter:alpha(opacity=40);
}

    $('#moveleft').click(function() {
        count = 0;   

        // Slide Level 2 description back into view
        $('#services_level2').animate({
            'margin-left': '0%',
            'opacity' : "1"
        }, 800);

        // Slide Level 3 out of view. The thumbnails follow Level 3. 
        $(level3_content).animate({
            'width': '0px',
            opacity: 1
        }, 400);

        // Delete the active class
        var oldClickedElement = $('.active').removeClass('active').find('a').attr('href');

        console.log(oldClickedElement);

        //only if old click element exists the do the animation
        if (oldClickedElement) {
            //animate out + reset to start
            $(oldClickedElement).animate({
                left: 0,
                'margin-left': '-50%',
                opacity: 0
            }, 500, function() {
               $(oldClickedElement).css({
                'margin-left' : '100%',
                left: 0
            });
           });            
        }       
    });