버튼과 같은 아코디언

Question

jquery의 새 버전입니다. 아코디언 버튼과 같은 버튼을 만들려고합니다. 버튼을 가져 와서이 페이지의 테마 선택기와 같은 div 아래에있는 내용 (예 : http://craigsworks.com/projects/qtip2/demos/#themeroller) (무엇을 호출해야할지 확실하지 않은 항목)을 만듭니다.

큰 부분은 슬라이드 아웃하고 페이지의 콘텐츠 위에 위치하며 슬라이드 아웃 할 때 div의 높이를 변경하지 않는다는 것입니다.

위젯이나 아코디언 버튼 (또는 다른 버튼)을 사용하여 작업하는 방법을 아는 사람이 있습니까?

감사합니다.

Answer 1

This fiddle 시작해야합니다. Internet Explorer 7에 대해 걱정할 경우 IE 7에 몇 가지 문제가 있음을 알고 있어야합니다. 몇 가지 조건부 스타일링으로 문제를 해결할 수 있습니다.

는

HTML

<div class="multiButton"> 
    <input class="main" type="button" Value="Set Up"/><input type="button" class="Selector" value="^"/> 
    <ul class="options"> 
     <li><a href="linka.html">Set Up</a></li> 
     <li><a href="linkb.html">Update</a></li> 
    </ul> 
</div> 
<div>Some more content</div> 

CSS

/*This is the "Slider"*/ 
.multiButton ul 
{ 
    display:none; 
    border: solid 1px black; 
    width:75px; 
    position: absolute; 
    background-color:#FFF; 
} 


/*Main Part of the button*/  
.multiButton .main 
{ 
    border: solid 1px black; 
    width:60px; 
} 


/*Slider "trigger"*/ 
.multiButton .Selector 
{ 
    border: solid 1px black; 
    border-left:none; 
    width:15px; 
} 


/*The Whole "Button"*/ 
.multiButton { position: relative;} 

아래

자바 스크립트를 깰

참고 : 이것은 시작하기위한 것입니다. 필요에 따라 링크의 단추를 클릭하기 위해 이벤트 처리기를 연결해야 할 수도 있습니다.