하위의 활성 클래스를 기반으로 요소의 상위를 선택할 수 있습니까?
user2596635
아코디언 탭을 클릭하면 양식이 오른쪽으로 슬라이드되는 고정 연락처 양식으로 내 페이지에 맞게 아코디언을 수정했습니다. 이 모든 것이 잘 작동합니다. 그러나 탭은 페이지에 비해 약간 크며 파일 탭을 반영하여 더 작게 만들고 싶습니다. 탭 자체의 크기를 조정하는 방법을 알아 냈지만 탭 바로 아래에 있기 때문에 부모의 배경색을 제거해야합니다.
탭의 보라색 부분은 유지하고 싶은 색상이고 검은 색은 제거하고 싶은 색상입니다. 내가 직면 한 문제는 탭의 검은 색을 제거하면 열릴 때 콘텐츠의 색도 제거된다는 것입니다.
아코디언에는 탭을 연 다음 닫으면 다음과 같이 클래스 (class = "collapse")가 생성되고 앵커 태그에 추가되는 데 도움이 될 수 있다고 생각되는 아코디언에는 다음과 같은 고유 한 클래스가 있습니다.
<div class="contact">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
Contact Us
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<!--form goes here-->
</div>
</div>
</div>
</div>
</div>
제거하고 싶은 배경색 <div class="panel panel-default"></div>이있는 상태에서 자식 인 앵커 태그에 추가 된 클래스로 제거 할 수있는 방법이 있습니까?
이에:
Ravimallya
다른 것을 할 필요가 없거나 너무 복잡하게 만들 필요가 없습니다. CSS를 아래와 같이 변경하십시오.
.panel.panel-default {
background-color: transparent;
}
.panel-default .panel-body {
background:#000;
}
바이올린 .
확장시 패널 제목을 색상으로 채우려면 jquery를 사용하십시오.
$('#myCollapsible').on('shown.bs.collapse', function () {
// do something… add css background etc.
});
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something… remove css background or set to transparent etc.
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
- 이전 게시물：Multiple Uploadify Buttons, which had a file added?
- 다음 포스트：colspan screwing up css asp.net table
관련 기사
Related 관련 기사
- 1
TD 및 COL / COLGROUP 요소의 상호 작용을위한 CSS 선택기를 작성할 수 있습니까?
- 2
각 하위에 대한 선택기 목록을 작성하지 않고 특정 클래스가있는 특정 요소의 모든 하위 요소를 선택할 수 있습니까?
- 3
파생 클래스가 구현할 기본 클래스의 속성 수를 선택할 수 있습니까?
- 4
CSS 상위 요소를 선택할 수 있습니까?
- 5
반응 구성 요소를 동적으로 생성하기 위해 배열을 반복 할 수 있습니까?
- 6
여러 브라우징 컨텍스트 (상위, iframe, 선택적으로 더 많은 iframe)가있는 페이지에서 비활성 선택이있는 요소를 어떻게 확인할 수 있습니까?
- 7
마이크로 컨트롤러를 틱 생성기로 사용하기 위해 chrono 클래스의 대상을 변경할 수 있습니까?
- 8
생성자가 C ++에서 인스턴스화 할 적절한 하위 클래스를 선택하는 추상 클래스를 작성할 수 있습니까?
- 9
각도 구성 요소 선택기를 해당 구성 요소의 속성으로 사용할 수 있습니까?
- 10
링크를 활성화하기 위해 고정 탐색 모음 아래의 비디오 요소를 무시할 수 있습니까?
- 11
기능적 언어의 컴파일 대상으로 사용하기 위해 GHC에서 유형 검사를 완전히 비활성화 할 수 있습니까?
- 12
CSS : 활성 선택기는 IE의 하위 요소 상태를 무시합니다.
- 13
같은 이름의 클래스가 더 많은 CSS를 통해 요소를 선택할 수 있습니까?
- 14
2 개의 하위 요소를 기반으로 요소 선택
- 15
특정 클래스의 자식 요소를 선택할 수 없습니다.
- 16
파이썬에서 xpath를 사용하면 요소의 하위 부분 만 선택할 수 있습니까?
- 17
하위 클래스의 가상 기능을 보완 할 수 있습니까?
- 18
"설치 디자이너"에서 둘 이상의 구성 요소를 선택할 수 있습니까?
- 19
기본 클래스를 하위 클래스로 승격 할 수 있습니까?
- 20
CSS 2.0 선택기를 사용하여 부모에 설정된 속성으로 요소를 어떻게 선택할 수 있습니까?
- 21
추상 클래스 또는 트레이 트의 매크로를 모든 하위 클래스에 적용 할 수 있습니까?
- 22
이것을 사용하여 위임 된 요소의 선택자를 참조 할 수 있습니까?
- 23
"요소 검사"를 비활성화하기 위해 브라우저와 통신 할 수 있습니까?
- 24
다른 클래스의 생성자의 도움으로 객체를 초기화 할 수 있습니까?
- 25
jest에서 단위 테스트를 분리하기 위해 React 구성 요소 내에서 서비스를 모의 할 수 있습니까?
- 26
다른 하위 클래스의 하위 클래스를 참조 할 수 있습니까?
- 27
하위 요소의 데이터를 기반으로 요소를 어떻게 선택합니까?
- 28
하위 요소의 데이터를 기반으로 요소를 어떻게 선택합니까?
- 29
컴파일 타임에 템플릿을 사용하여 클래스를 선택하기 위해 상수를 사용할 수 있습니까?
몇 마디 만하겠습니다