Question

我一直在寻找Accordion，以便在Web浏览器上使用可折叠项呈现这些数据。

我偶然发现了这个。

原始代码笔：https://codepen.io/abergin/pen/ihlDf
（有一些文件和见解）

我将此CP下载为具有HTML，CSS和SASS文件的ZIP。

我离线修改了它以消除列最大宽度限制，并能够在桌面浏览器上尽可能多地显示。为字体，填充和放置很多较小的值。利润等。

为了让这里的人们更简单/更容易，我用我的数据分发原始的Code Pen。

修改代码笔：https://codepen.io/xml/pen/JrqKWQ?editors=0100

我无法解决或弄清楚这是不是。

所有可折叠的东西，如＆＃34; Utilities＆＃34;在下方显示一个巨大的空地。我不确定如何消除它占用的空间。

包含大量<h2>（应用）的每个<p>（文件夹名称）都会发生这种情况。

如何修复CSS或代码以消除空白空间并确保仅在崩溃扩展到下方时才占用空间？

不确定Code Pen的CSS / SASS代码的哪一部分正在执行此操作以及如何修复它。我的目标是在屏幕上最大化数据可见性。

＆＃13;

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
  
.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both
    
.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black
  
body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px
  
  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn
  
h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2
  
ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0
  
  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn
      
    &:nth-of-type(1)
      animation-delay: 0.5s
    
    &:nth-of-type(2)
      animation-delay: 0.75s
        
    &:nth-of-type(3)
      animation-delay: 1.0s
    
    &:last-of-type
      padding-bottom: 0
      
    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0
      
      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px
        
      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )
          
      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )
    
    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0
      
      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )
            
        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )
          
          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg)

＆＃13;

<h1>CSS + HTML only Accordion Element</h1>
		<ul>
			<h2>Pg: </h2>
			<li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
				<p>Apps 3</p>
			</li>
			<p>App: <span style="color:#0000ff">com.apple.mobilephone</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobilecal</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobileslideshow</span></p>
			<p>App: <span style="color:#0000ff">com.apple.camera</span></p>
			<p>App: <span style="color:#0000ff">com.apple.videos</span></p>
			<p>App: <span style="color:#0000ff">com.apple.youtube</span></p>
			<p>App: <span style="color:#0000ff">com.apple.Maps</span></p>
			<p>App: <span style="color:#0000ff">com.apple.weather</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobilenotes</span></p>
			<p>App: <span style="color:#0000ff">com.apple.reminders</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobiletimer</span></p>
			<p>App: <span style="color:#0000ff">com.apple.gamecenter</span></p>
			<li><input type="checkbox" checked><i></i><h2>Apple</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.apple.mobileme.fmf1</span></p>
				<p>App: <span style="color:#0000ff">com.apple.Cards</span></p>
				<p>App: <span style="color:#0000ff">com.apple.iBooks</span></p>
			</li>
			<p>App: <span style="color:#0000ff">com.apple.MobileStore</span></p>
			<p>App: <span style="color:#0000ff">com.apple.AppStore</span></p>
			<p>App: <span style="color:#0000ff">com.apple.Preferences</span></p>
		</ul>
		<!--Exit PAGE-->
		<!--Enter PAGE-->
		<ul>
			<h2>Pg: </h2>
			<li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
				<p>Apps 3</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Utilities</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.apple.MobileAddressBook</span></p>
				<p>App: <span style="color:#0000ff">com.apple.calculator</span></p>
				<p>App: <span style="color:#0000ff">com.apple.VoiceMemos</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Jailbreak</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.saurik.Cydia</span></p>
				<p>App: <span style="color:#0000ff">libactivator</span></p>
				<p>App: <span style="color:#0000ff">eu.heinelt.ifile</span></p>
				<p>App: <span style="color:#0000ff">crash-reporter</span></p>
				<p>App: <span style="color:#0000ff">com.googlecode.mobileterminal.Terminal</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Social</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.atebits.Tweetie2</span></p>
				<p>App: <span style="color:#0000ff">info.colloquy.mobile</span></p>
				<p>App: <span style="color:#0000ff">com.tapbots.Tweetbot</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Other</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.apple.stocks</span></p>
				<li><input type="checkbox" checked><i></i><h2>Newsstand</h2>
					<p>Apps 1</p>
				</li>
			</li>
			<p>App: <span style="color:#0000ff">com.clickgamer.AngryBirds</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobileipod</span></p>
		</ul>
		<!--Exit PAGE-->
		<!--Enter PAGE-->
		<ul>
			<h2>Pg: </h2>
			<li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
				<p>Apps 1</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
				<p>Apps 3</p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Utilities</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.apple.MobileAddressBook</span></p>
				<p>App: <span style="color:#0000ff">com.apple.calculator</span></p>
				<p>App: <span style="color:#0000ff">com.apple.VoiceMemos</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Jailbreak</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.saurik.Cydia</span></p>
				<p>App: <span style="color:#0000ff">libactivator</span></p>
				<p>App: <span style="color:#0000ff">eu.heinelt.ifile</span></p>
				<p>App: <span style="color:#0000ff">crash-reporter</span></p>
				<p>App: <span style="color:#0000ff">com.googlecode.mobileterminal.Terminal</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Social</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.atebits.Tweetie2</span></p>
				<p>App: <span style="color:#0000ff">info.colloquy.mobile</span></p>
				<p>App: <span style="color:#0000ff">com.tapbots.Tweetbot</span></p>
			</li>
			<li><input type="checkbox" checked><i></i><h2>Other</h2>
				<p>Apps 1</p>
				<p>App: <span style="color:#0000ff">com.apple.stocks</span></p>
				<li><input type="checkbox" checked><i></i><h2>Newsstand</h2>
					<p>Apps 1</p>
				</li>
			</li>
			<p>App: <span style="color:#0000ff">com.clickgamer.AngryBirds</span></p>
			<p>App: <span style="color:#0000ff">com.apple.mobileipod</span></p>
		</ul>

＆＃13;

Answer 1

问题在于p标记的边距。

它有默认边距，您添加了margin-top:14px;

然后ul li input[type="checkbox"]:checked ~ p规则删除了margin-bottom（将其设置为0 ）。

因此空间是隐藏元素的附加边距。

如果在关闭时将顶部和底部边距都设置为0，那么它可以正常工作。

请参阅https://codepen.io/anon/pen/NaVbYN?editors=0100

Answer 2

不确定但尝试添加

padding-bottom: 0px!important;

或

margin-bottom: 0px!important;

到你的h2班

仅修复CSS + HTML Accordion以消除不必要的空白区域？

2 个答案: