Question

参见示例：https://www.hatched.co.uk/let/pricing

单击i图标，它会展开以显示文本。我想完成同样的事情。这可以用css完成吗？如果是这样，怎么样？如果没有，我猜JavaScript。如果是这样，怎么样？

Answer 1

您只能使用CSS切换悬停时的文字，而不是点击。

为此，我强烈建议您使用jQuery。然后，您可以使用$ .click函数设置处理程序，并使用$ .toggle显示/隐藏文本。

Jquery还有一个内置的滑动函数Jquery Sliding

Answer 2

您可以使用“复选框黑客”执行此操作，您可以通过label属性将for标记绑定到输入字段，然后使用标签的内容（您的图标）来操作复选框，并使用:checked伪类和兄弟选择器来切换其他元素（隐藏文本）的显示。

.text,input {
  display: none;
}
input:checked ~ .text {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <input id="twitter" type="checkbox">
  <label for="twitter"><i class="fa-twitter fa"></i></label>
  <div class="text">twitter</div>
</div>
<div>
  <input id="facebook" type="checkbox">
  <label for="facebook"><i class="fa-facebook fa"></i></label>
  <div class="text">facebook</div>
</div>

或者使用相同的技巧，您可以使用javascript在您点击的链接上切换一个类并执行相同的操作。

var icons = document.getElementsByTagName('i');
for (var i = 0; i < icons.length; i++) {
  icons[i].addEventListener('click',function() {
    this.classList.toggle('active');
  });
}

.text,input {
  display: none;
}
.active + .text {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa-twitter fa"></i>
  <div class="text">twitter</div>
</div>
<div>
  <i class="fa-facebook fa"></i>
  <div class="text">facebook</div>
</div>

i / info图标：点击它以显示文本/这可以用css完成，以及如何完成？

2 个答案: