jQuery는 초기 트리거 동작을 반복하지 않을 것입니다.

Question

클릭하면 주 컨테이너가 600px로 슬라이드되고 새 컨테이너가 3div에서 더 많은 옵션을 표시하도록 3divs를 생성했습니다.

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

내가 얻을 수있는 방법이 무엇을 할 수 나 NT?

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 문서를 읽고 해결책을 발견했다 -) 도움말에 대한 Jquery .index()

감사합니다.