2014-07-09 5 views
0

확장 가능한 아이콘을 설정하는 방법 (예)보기 버튼을 클릭하여 하나의 행을 볼 경우 개의 행이 너무 많음을 고려해 봅시다. [보기 버튼은 (+) 기호뿐만 아니라 (-)로 구성되어야합니다.이 두 기호는 같은 위치에 있습니다.]보기 버튼을 클릭하면 기호가 자동으로 (-)로 변경되고 다른 행을 클릭하면 변경됩니다. 기존 (-) 기호는 (+)로 바뀌므로 현재 행이 (-)으로 변경됩니다. 이 의미 취소하면 ..... 확장 가능한 아이콘을 같은 위치에 설정하는 방법

방법 모두 + 아이콘과 설정 - 버튼 다음 모든

+0

확장하고 collaps에 대한 두 개의 서로 다른 CSS 클래스를 만듭니다. 동일한 DIV 또는 SPAN을 사용할 수 있으며 자바 스크립트를 사용하는 대신 CSS 클래스 이름 만 변경하면됩니다. –

+2

에 오신 것을 환영합니다. 여기에서 묻는 질문에는 지금까지 해본 내용의 코드와 어떤 시점에서 멈추었는지에 대한 정보가 포함되어야합니다. –

답변

0

당신을 가정 같은 장소에서 아이콘을

<input type="button" class="expand" onclick="MyAction(this)" /> 

귀하의 CSS 클래스는

될 것입니다
.expand 
{ 
background-image: (Path for Expand icon) 
} 

.collaps 
{ 
background-image: (Path for collaps icon) 
} 

당신은

<script type="text/javascript"> 
function MyAction(element) 
{ 
    if(element.className =="expand") 
{ 
    // logic for collaps behavior 
    element.className = "collaps"; 
} 
else 
{ 
    // logic for expand behavior 
    element.className = "expand"; 
} 
} 
</script> 
를 다음과 같은 자바 스크립트를해야합니다

당신은 아이콘을 수정하고 정렬 좀 더 CSS 트릭이 필요합니다하지만 난 당신이 쉽게 할 수 있기를 바랍니다 :)

+0

답장을 보내 주셔서 감사합니다. mvc 응용 프로그램을 사용하고 있습니다. – user3819665

+0

코드는 MVC 응용 프로그램에서 작동합니다. 이 코드를 참조하고 필요에 따라 변경할 수 있습니다. 건배 : –

+0

괜찮습니다. 고마워요. 다른 질문이 있으 십니다. – user3819665

관련 문제