왼쪽에서 오른쪽으로 슬라이딩 부분

링크/버튼을 클릭 할 때 위쪽에서 아래쪽으로 내용을 슬라이드하는 슬라이더가 있습니다. 단추의 오른쪽에서 밀어 내서 왼쪽에서 오른쪽으로 옮기고 싶습니다. 이미 가지고있는 코드를 조정하는 것만으로 가능합니까? 감사.왼쪽에서 오른쪽으로 슬라이딩 부분

HTML :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>jQuery Accordion Style DIV Menu</title> 
<link href="format.css" rel="stylesheet" type="text/css" /> 
<link href="text.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<script type="text/javascript" src="javascript.js"> </script> 
</head> 

<body> 
<div id="wrapper"> 

    <div class="accordionButton">Button 1 Content</div> 
    <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> 
    <div class="accordionButton">Button 2 Content</div> 
    <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> 
    <div class="accordionButton">Button 3 Content</div> 

    <div class="accordionContent">Content 1<br />Short Example</div> 
    <div class="accordionButton">Button 4 Content</div> 
    <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div> 
</div> 
</body> 
</html>

javascript.js : 당신이 할 triyng하는지, 내가 플러그인을 추천 할 것입니다

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton').click(function() { 

    //REMOVE THE ON CLASS FROM ALL BUTTONS 
    $('.accordionButton').removeClass('on'); 

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
    $('.accordionContent').slideUp('normal'); 

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
    if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
    } 

}); 


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() { 
    $(this).addClass('over'); 

//ON MOUSEOUT REMOVE THE OVER CLASS 
}).mouseout(function() { 
     $(this).removeClass('over');          
}); 

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 


/******************************************************************************************************************** 
CLOSES ALL S ON PAGE LOAD 
********************************************************************************************************************/ 
$('.accordionContent').hide(); 

});

출처

2012-01-25 user1165861

어쩌면이 링크는 http://www.learningjquery.com/2009/을 도울 수 02/slide-elements-in-different-directions –

@ABCade이 예제의 문제점은 div의 바깥쪽에 버튼을 배치하는 방법을 모르겠다는 것입니다. 아직도 작동 중입니다 – user1165861

아니, 및 위해. 어쩌면 caroFredSel 또는 nivo : http://nivo.dev7studios.com/

이렇게하면 삶이 편해질 것입니다. 이

출처

2012-01-25 18:59:22 Relic

그게 제가 찾고있는 슬라이더가 아닙니다. 꽤 많은이 사이트와 같은 슬라이더를 얻으려고 노력하고 있습니다. http://www.grano.hu/ – user1165861

당신이 가지고있는 것보다 편집하기가 더 쉽지 않을 것입니다 ... 만약 당신이 원한다면 내가 가지고있는 것을 도울 수 있습니다. 하지만이 슬라이더가 이미 수행중인 작업을 처리 할 수있는 코드가 추가 될 것입니다. – Relic

아, 알았어. 내가 그걸 시험해 볼게. 감사! – user1165861

검사 :

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

의 differents가 설명이

출처

2012-01-25 19:04:52 MCSI

그래, 내가 그 예제를 봤어,하지만 가능한 div 밖에서 버튼을 이동하고 여전히 작동하게 할 수 있습니까? – user1165861

예, 버튼이나 슬라이딩 컨텐츠를 참조 할 수 있어야합니다. 예를 들어, 다른 요소 또는 상대적인 ID와 관련 될 수 있습니다. – c24w

@ c24w 정말 미안하다. – user1165861

사용이 슬라이드,

$('.accordionButton').click(function() { 
    $(this).next().animate({width: 'toggle'}); 
    });

출처

2012-01-25 19:09:12 Rahul

왼쪽에서 오른쪽으로 슬라이딩 부분

답변

관련 문제