2016-06-04 2 views
0

나는 그것이 작동하지 않는 이유를 모르겠다. 어쩌면 나는 간단한 것을 놓쳐 버릴 것이다. == 나는 왜 내가 원하는지는 내가 다른 div보다 숨겨진 아이콘보기 1 div를 사용할 때 나는 원하는 것이다. 내가 두 번째 사업부가 표시됩니다 아이콘 만 1 아이콘 DIV 여기 부트 스트랩 축소 div보기 1 숨기기 1

여기 enter link description here

의 예입니다 숨길 수 없습니다를 클릭하면 내가 첫번째 아이콘 사업부를 보여 클릭하면

지금은 HTML입니다 여기

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="right-lower-container accordion" id="myGroup"> 
    <div class="testing-notification"> 
    <span class="glyphicon glyphicon-comment notification-bar accordion-toggle" data-toggle="collapse" data-target="#testing1" data-parent="#myGroup"></span> 
    <div id="testing1" class="collapse notification-block"> 
     testing 1 
    </div> 
    </div> 
    <div class="testing-notification"> 
    <span class="btn glyphicon glyphicon-bell notification-bar accordion-toggle" data-toggle="collapse" data-target="#testing2" data-parent="#myGroup"></span> 
    <div id="testing2" class="collapse notification-block"> 
    testing2 
    </div> 
    </div> 
    <a class="option-font" href="#"> 
    <span> 
     new items 
    </span> 
    </a> 
    <a class="option-font" href="#"> 
    <span class="glyphicon glyphicon-search"> 
     search 
    </span> 
    </a> 
</div> 

코드

내 CSS 코드입니다

.right-lower-container { 
    height: 40%; 
    width: 100%; 
    display: block; 
    vertical-align: top; 
    text-align: right; 
} 

.notification-bar { 
    color: black; 
    margin-right: 2.5%; 
} 

.notification-bar:hover { 
    color: gray; 
} 

.notification-block { 
    width: 100px; 
    height: 100px; 
} 

.testing-notification { 
    display: inline-block; 
    width: 20%; 
} 

#testing1,#testing2{ 
    background-color:red; 
    width:100px; 
    height:200px; 
} 

.option-font, 
.notification-bar, 
.testing-notification { 
    display: inline-block; 
    vertical-align: top; 
} 

추가 질문 내가 부트 스트랩을 사용하여 입력 타입의 스타일을 어떻게

enter image description here

? 여기

는 HTML 코드는 "폼 그룹"으로 입력을 포장 할 필요가 스타일의 부트 스트랩 구성 요소

<form method="post" action=""> 
    <input type = "submit" clas="btn btn-default btn-direct-message" value="message" name="chat"> 
</form> 
+0

문제를 재현 할 수 없거나 더 명확하게해야 할 수도 있습니다. 너는 무엇을 성취하려고 하는가? 예상되는 결과는 무엇입니까? – Aziz

+0

내가 원하는 것은 스팬 아이콘을 사용하여 div 바로 열기를 사용할 때입니까? 다른 아이콘을 클릭하면 첫 번째 div가 두 번째 div보다 숨김 – Chew

답변

0

당신은 때 다른 사업부를 축소하려면 클래스

<form method="post" action=""> 
     <div class="form-group"> 
     <input type = "submit" clas="btn btn-default btn-direct-message"  value="message" name="chat"> 
    </div> 
</form> 
0

입니다 열기 시도 가져옵니다 다음

<!DOCTYPE html> 

\t <!DOCTYPE html> 
 
\t <html> 
 
\t <head> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
\t </head> 
 
\t <body> 
 

 
\t <div class="container"> 
 
\t <h2>Accordion Example</h2> 
 
\t <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
 
\t <div class="panel-group" id="accordion"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t <div class="panel-heading"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
\t \t \t </h4> 
 
\t \t </div> 
 
\t \t <div id="collapse1" class="panel-collapse collapse in"> 
 
\t \t \t <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
\t \t \t sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel panel-default"> 
 
\t \t <div class="panel-heading"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
\t \t \t </h4> 
 
\t \t </div> 
 
\t \t <div id="collapse2" class="panel-collapse collapse"> 
 
\t \t \t <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
\t \t \t sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel panel-default"> 
 
\t \t <div class="panel-heading"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
\t \t \t </h4> 
 
\t \t </div> 
 
\t \t <div id="collapse3" class="panel-collapse collapse"> 
 
\t \t \t <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
\t \t \t sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </div> 
 
\t \t 
 
\t </body> 
 
    </html>

관련 문제