如何在點擊時隱藏div

Question

我想創建一個手風琴，其中所有選項卡最初都關閉，每當我點擊其中一個選項卡時，該特定選項卡打開，然後在第二次單擊它時關閉。我可以打開div1，但我不知道如何關閉它或如何概括打開和關閉。

我還創建了一個codepen示例，您可以看到我迄今爲止所做的工作。點擊藍色的div，它應該打開隱藏的段落。

<http://codepen.io/anon/pen/qbMBXd> 

[編輯：另外，當一個標籤頁中打開，我點擊一個又一個，第一個選項卡，應關閉所有其他除了當前打開的一個]

Answer 1

改變你的JavaScript看起來像這樣

function changeSize(x){ 
    var div = document.getElementById(x); 
    if (div.style.height == "50px"){ 
     switch (div.id){ 
     case("box1"): 
      div.style.height = "auto"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box2"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box3"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box4"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box5"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      break; 


     } 
    } else { 
    div.style.height = "50px"; 
    } 
    } 

醜陋，但它的工作。

你可以從你的HTML調用該函數每當DIV點擊

<div class="colorbox" id="box1" onclick="changeSize('box1')"> 

好運

Answer 2

我認爲你需要閱讀關於JavaScript & JQuery讓這個工作。

你有一個函數，它給了你一個事件發生時改變CSS的可能性。 例如這樣。

document.getElementById(target).style.display = 'none'; 

另一個函數可以對點擊作出反應！

如果顯示等於none，那麼可以使用if語句來查看，然後將其更改爲block或者您更喜歡什麼，如果不相同，則將其更改爲none。

希望我能幫助:)

巨星，

Traxstar！

Answer 3

好了，所以，有這樣做的許多方面。遵循你的codepen示例，你不能喜歡這個嗎？

var colorvar = document.getElementById('box1'); 
    colorvar.addEventListener("click", function() { 
     if (document.getElementById("box1").style.height == "auto") { 
     document.getElementById("box1").style.height = document.getElementById("box1").style.height = "50px"; 
     } else { 
     document.getElementById("box1").style.height = document.getElementById("box1").style.height = "auto"; 
     } 
    }); 

Answer 4

嘗試...... :)

.collapse > * + *{ 
 
    display:none; 
 
} 
 
.collapse > *{ 
 
    cursor:pointer; 
 
} 
 
.collapse:focus{ 
 
    outline:none; 
 
} 
 
.collapse:focus > * + *{ 
 
    display:block; 
 
}

<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div>

Answer 5

這是我的第二個職位，檢查是否有幫助.. :)

$('div.accordion-body').on('shown', function() { 
 
    $(this).parent("div"); 
 

 
}); 
 

 
$('div.accordion-body').on('hidden', function() { 
 
    $(this).parent("div"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="jai" class="accordion-body collapse in"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="collapseTwo" class="accordion-body collapse"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="collapse3" class="accordion-body collapse"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>