Question

我创建了3个div，点击后，主容器滑动一半600px，一个新容器滑入，以显示3个div中的更多选项。

我设法让主要根据3个div选项将新内容滑动一半，但在关闭之后再次滑动！

网站链接更加清晰http://www.contractax.com/tax-contractors-edinburgh.html

HTML：

<aside>
<h1 class="lato blue">Getting Started</h1>
<ul id="menu_container">
<li id="show_newbus" class="show_hide green">NEW BUSINESS</li>
<li id="show_limited" class="show_hide amber">UMBRELLA vs LIMITED</li>
<li id="show_investigation" class="show_hide red">TAX INVESTIGATIONS</li>
</ul>
</aside>
<!--SLIDES HALF WAY 600px only-->
<div class="main-inner lato blue-underline">
</div>

<div id="#menu_newbus" class="new-business">
<div class="close-bt"></div>
</div>
<div class="why-ltd">
<div class="close-bt show_hide-2"></div>
</div>
<div class="investigation">
<div class="close-bt"></div>
</div>

CSS：

.main-inner {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    height: 590px;
}
aside {
float: left;
width: 314px;
padding-top: 10px;
}
aside ul li {
width: 314px;
height: 175px;
float: left;
margin: 5px 0 0 0;
background-color: #e9e9e9;
list-style: none;
font-size: 24px;
line-height: 175px;
text-align: center;
background-image: url(../images/ui/arrow-left.png);
background-repeat: no-repeat;
background-position-x: 310px;
-webkit-transition: all 350ms ease-out 100ms;
-moz-transition: all 350ms ease-out 100ms;
-ms-transition: all 350ms ease-out 100ms;
-o-transition: all 350ms ease-out 100ms;
transition: all 350ms ease-out 100ms;
}

.new-business {
width: 500px;
height: 525px;
padding: 10px;
display: none;
background-color: #FFFFFF;
position: absolute;
top: 44px;
left: 1050px;
z-index: 1;
border: solid #ccc 1px;
}
.why-ltd {
width: 510px;
height: 525px;
padding: 10px;
display: none;
background-color: #FFFFFF;
position: absolute;
top: 44px;
left: 1050px;
z-index: 1;
overflow-y: scroll;
border: solid #ccc 1px;
}
.investigation {
width: 500px;
height: 525px;
padding: 10px;
display: none;
background-color: #FFFFFF;
position: absolute;
top: 44px;
left: 1050px;
z-index: 1;
overflow-y: scroll;
border: solid #ccc 1px;
}

Jquery的：

//Triger the Slider Open
$(document).ready(function(){
$(".show_hide").click(function () {
        $(".main-inner").animate({right: '600px'}, 500);
                if ($('.new-business,.why-ltd,.investigation').is(":hidden"))
       {   
            $('.main-inner').show('slow');  
       }
       else{ 
                $(".show_hide").toggle("slow");
    return false;
                //end
       }        
    });
        //Button Action
            $( ".close-bt" ).click(function() { 
        $( ".new-business,.why-ltd,.investigation" ).hide( "slow", "linear" );
        });
        $(".close-bt").click(function () {
        $(".main-inner").animate({left: '0px'}, 500);

    });
});


$(".close-bt").click(function (e) {
    e.preventDefault();
    var target = $(this).attr("href");
    $(".main-inner").not(target).animate({left: '0px'}, 500);
    $(target).toggle("slow");
        return false;
});
//Change content
$(document).ready(function(){

    $("#show_newbus").click(function(){
         $(".new-business").show();
         $(".why-ltd").hide();
         $(".investigation").hide();
    });

    $("#show_limited").click(function(){
         $("#menu_newbus").hide();
         $(".why-ltd").show();
         $(".investigation").hide();
    });

    $("#show_investigation").click(function(){
         $(".new-business").hide();
         $(".why-ltd").hide();
         $(".investigation").show();
    });
});

我怎样才能让它做我想做的事？

Answer 1

修正：

jQuery(function () {
jQuery('.show_hide').click(function () {
    var index = $(this).index(),
        newTarget = jQuery('.main-inner').eq(index).animate({left: '-600px'}, 500);
    jQuery('.main-inner').not(newTarget).animate({left: '-600px'}, 500);

});

}）;

我们找到了解决jQuery Documentation＆gt ;-)的解决方案 Jquery .index()

感谢您的帮助。

jQuery不会重复初始触发操作，

1 个答案: