Question

我是html和CSS的新手。我正在为conference设计一个网站。我正在使用以下代码为我们会议的受邀发言人提供一个切换效果，这将提供一个带有研究兴趣的下拉列表框。

<tr><tr><tr><td><th></th></td></tr></tr></tr><!DOCTYPE html>
<html>
<head>
<style>
.maindrop{
  width:50%;
}
.bar{
  padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
}

.bar:hover{
background: gray;
}

.dropbox{
  height: 0;
  transition: 1s;
  overflow: hidden;
  width : 100%;
   transition-property: background;
  transition-timing-function: linear;   
}

.dropbox:target{
  height:auto;
}
</style>
</head>
<body>

<div class="maindrop">
  <div class="fold default">
    <a class="bar" href="#tab1">Speaker 1</a>
    <div class="dropbox" id='tab1'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
    </div>
  </div>
  <div class="fold" >
    <a class="bar" href="#tab2"> Speaker 2</a>
    <div class="dropbox" id='tab2'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
    </div>
  </div>
  <div class="fold">
    <a class="bar" href="#tab3"> Speaker 3</a>
    <div class="dropbox" id='tab3'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
    </div>
  </div>
  <div class="fold">
    <a class="bar" href="#tab4"> Speaker 4</a>
    <div class="dropbox" id='tab4'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
    </div>
  </div>
</div>

</body>
</html>

Quesitons：

首先，动画无法正常工作。下拉框应缓慢而轻柔地进入。（我想我错过了一些动画效果!!!）

我缺少什么？

第二件事，对于第一次单击下拉框可见，然后在第二次单击时可以使复位框知道。怎么做？

PS：如果有任何样式选项可以使外观更好，请随时编辑代码。我将期待一种愉快而优雅的方式来提供有关会议发言人的信息。

Answer 1

＆＃13;

.maindrop {
    width: 50%;
}
.bar {
    padding: 20px;
    color: white;
    background: #1FB5AC;
    display: block;
    font-family: Times;
    text-decoration: none;
    font-size: 16px;
    transition: .2s ease-out;
}
.bar:hover {
    background: gray;
}
.dropbox {
    max-height: 0;
    transition: .2s ease-out;
    overflow: hidden;
    width: 100%;
}
.dropbox:target {
    max-height: 300px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div class="maindrop">
        <div class="fold default">
            <a class="bar" href="#tab1">Speaker 1</a>
            <div class="dropbox" id='tab1'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab2"> Speaker 2</a>
            <div class="dropbox" id='tab2'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab3"> Speaker 3</a>
            <div class="dropbox" id='tab3'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab4"> Speaker 4</a>
            <div class="dropbox" id='tab4'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 2

首先，动画无法正常工作。

您遇到的主要问题是浏览器无法在height:0;和height:auto;之间设置动画 - 浏览器需要一个明确的起点和一个明确的终点来制作动画。

所以你可以（例如）在height:0;和height:200px;之间进行动画制作 - 但问题（不言而喻）就是并非所有的演讲者资料都是相同的长度你不会我想要为每个新的配置文件手动输入不同的高度（包括编辑每个配置文件时）。

因此，解决方案是通过javascript而不是CSS应用height值。然后你可以在：

之间制作动画

dropbox.style.height = '0';

和

dropbox.style.height = dropbox.scrollHeight + 'px';

您遇到的第二个问题是第二次点击时打开的保管箱没有关闭。这是因为您正在使用:target伪类来检测第一次点击...但是如果您在同一个保管箱上再次点击...，保管箱仍然是{{1}的焦点} - 所以没有任何改变。

相反，您可以使用javascript添加和删除类:target。该脚本将检查折叠是否打开 - 如果不是，它将打开它，如果不是，它将关闭它。

工作示例 （具有不同长度的演讲者资料）：

.open

var folds = document.getElementsByClassName('fold');

function toggle(fold) {

    var dropbox = fold.getElementsByClassName('dropbox')[0];

    if (fold.classList.contains('open')) {
        dropbox.style.height = '0';
    }

    else {
        dropbox.style.height = dropbox.scrollHeight + 'px';
    }

    fold.classList.toggle('open');
}


function speakersAccordion() {
	var openFolds = document.getElementsByClassName('open');

    for (var i = 0; i < openFolds.length; i++) {
    if (openFolds[i] === this) continue;
    toggle(openFolds[i]);
    }

    toggle(this);
}

for (var i = 0; i < folds.length; i++) {
folds[i].addEventListener('click',speakersAccordion, false);
}

.maindrop{
width:50%;
}

.bar {
display: block;
padding: 20px;
font-family: Times, serif;
font-size: 16px;
text-decoration: none;
color: white;
background-color: #1FB5AC;
}

.bar:hover {
background-color: gray;
}

.dropbox {
height: 0;
transition: all 0.5s ease-out;
overflow: hidden;
width : 100%;  
}

.dropbox p:first-of-type {
margin-top: 0;
}

如何设置切换效果的样式？

Quesitons：

2 个答案: