雙擊可減小div的大小？

Question

嗨，我只是想知道是否有雙擊div的方式，並通過使用CSS降低高度。

<div class="container"></div> 
    <ul class="accordion"> 
    <li> 
     <a href="#first" class="accordion-header">First</a> 
     <div class="accordion-content" id="first"> 
     <p>Bonjour</p></div> 
     </li> 

     <li> 
     <a href="#second" class="accordion-header">Second</a> 
     <div class="accordion-content" id="second"> 
      <p>Hello</p></div> 
     </li> 


     <li> 
     <a href="#third" class="accordion-header">Third</a> 
     <div class="accordion-content" id="third"> 
      <p>No</p></div> 
     </li> 

你可以找到，我想在這個Fiddle調整代碼。

Answer 1

注意：請不要實際使用這個。這是一個有趣的方式去實現你想要的，對我來說是一個有趣的挑戰，但是Javascript是這個工作的更合適和可靠的工具。除非你在完全不使用JS的情況下需要這個功能的客戶端，否則只需要對它使用一些jQuery並稱它爲一天。

所以， 我無法弄清楚如何在只在您當前的標記使用CSS ul做到這一點，但如果你打開它改變一點點，你可以只用CSS做到這一點。 我很笨，只需要將下面的代碼插入ul元素。這裏有一個例子：

HTML

<ul class="accordion"> 
    <li> 
     <span class="span" tabindex="0"> 
      <input type="text" value="&nbsp;" readonly="true" /> 
      <a href="#showme">Show</a> 
     </span> 
     <p id="showme" class="alert">Hidden Content</p> 
    </li> 
</ul> 

CSS

body { 
    font: 1em'Source Sans Pro', sans-serif; 
} 
.accordion { 
    width: 100%; 
    padding:0; 
    margin:0; 
    list-style-type: none; 
} 
span { 
    display: block; 
    padding: 15px 20px; 
    background: #bbb; 
    color:#fff; 
    text-decoration: none; 
    font-size: 1.2em; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1); 
    margin-bottom: 5px; 
} 
span a { 
    text-decoration: none; 
} 
span a:visited { 
    color:#fff; 
} 
.alert { 
    display: none; 
    margin: 20px; 
} 
span { 
    position: relative; 
} 
span a { 
    position: relative; 
    z-index: 2; 
} 
span a:hover, span a:active { 
    z-index: 4; 
} 
span input { 
    background: transparent; 
    border: 0; 
    cursor: pointer; 
    position: absolute; 
    top: -1px; 
    left: 0; 
    width: 101%; 
    height: 301%; 
    z-index: 3; 
} 
span input:focus { 
    background: transparent; 
    border: 0; 
    z-index: 1; 
} 
#showme:target { 
    display: block; 
} 

小提琴：https://jsfiddle.net/yn13syuj/

從本質上講，這是什麼做的是使用一些z-index弄虛作假，直到你點擊它覆蓋a標籤一旦。然後，一旦發現它，您可以使用:target更改隱藏內容的display屬性。

Answer 2

只使用CSS，你不能處理雙擊事件，使用JavaScript和.ondblclick功能要做到這一點，這裏是你的代碼的演示：

var divs = document.getElementsByClassName("accordion-content"); 
 

 
for (var i = 0; i < divs.length; i++) { 
 

 
    divs[i].ondblclick = function() { 
 
    if (this.offsetHeight > 50) { 
 
     this.style.height = this.offsetHeight - 20 + "px"; 
 
    } 
 
    }; 
 
}

body { 
 
    font: 1em'Source Sans Pro', sans-serif; 
 
} 
 
.container { 
 
    width: 100%; 
 
    max-width: 400px; 
 
} 
 
.accordion { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 
.accordion-header { 
 
    display: block; 
 
    padding: 15px 20px; 
 
    background: #bbb; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-size: 1.2em; 
 
    text-transform: uppercase; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1); 
 
    margin-bottom: 5px; 
 
} 
 
.accordion-content { 
 
    height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: height 400ms ease; 
 
    transition: height 400ms ease; 
 
} 
 
.accordion-content p { 
 
    margin: 20px; 
 
} 
 
.accordion-content:target { 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
}

<div class="container"></div> 
 
<ul class="accordion"> 
 
    <li> \t <a href="#first" class="accordion-header">First</a> 
 

 
    <div class="accordion-content" id="first"> 
 
     <p>Bonjour</p> 
 
    </div> 
 
    </li> 
 
    <li> \t <a href="#second" class="accordion-header">Second</a> 
 

 
    <div class="accordion-content" id="second"> 
 
     <p>Hello</p> 
 
    </div> 
 
    </li> 
 
    <li> \t <a href="#third" class="accordion-header">Third</a> 
 

 
    <div class="accordion-content" id="third"> 
 
     <p>No</p> 
 
    </div> 
 
    </li> 
 
</ul>

它不斷降低高度直到它達到50 px，您可以更改它以符合您的需求。

這裏是你的updated Fiddle。

Answer 3

這是可以實現的CSS只，如果你可以在每個<div class="accordion-content">後立即添加以下HTML：

<a href="#"></a><input> 

然後將這些款式：

.accordion-content { 
    position: relative; 
} 

.accordion-content a, .accordion-content input { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
} 

.accordion-content input:focus { 
    z-index: -1; 
} 

.accordion-content a:focus { 
    z-index: 1; 
} 

Fiddle