为什么锚定滑入div在div中的文本时不起作用

Question

我有一个锚点，当点击它时，一个类box的div正在滑入。 这在div中没有​​文本的情况下完美无缺。 但是当我在div中放入一些文本时，锚点不再起作用了。 有人能告诉我我做错了吗？

HTML：

<a class="slide" href="#">Slide Out</a>

<div id="fade-in" class="box"></div> 

的CSS：

a {
  text-decoration: none;
  background: #009de1;
  cursor: pointer; 
  float: right;
  color: #fff;

}

.box {
   display: block;
    background: #009de1;  
    float: right;
    color: #fff;
 }

 #fade-in {
    height: 20px;
    width: 1px;
    opacity: 0;
    transition: all .75s ease;  
 }

 #fade-in.show {
    opacity: 1;
    height: 20px;
    width: 200px;

 }

js：

$('.slide').on('click', function(){
   $('#fade-in').toggleClass('show');
});

这是没有文字的小提琴。你可以看到锚点工作 https://jsfiddle.net/94uhxjgk/41/

在这里我已经在div中添加了一些文本，锚点不再起作用了 https://jsfiddle.net/94uhxjgk/43/

Answer 1

这种情况正在发生，因为你的文字越来越大，它越过你的点击区域，所以它永远不会触发点击事件，修复此问题你可以添加

#fade-in{
....
overflow:hidden;
}

fiddle

修改

由于元素的内容大于宽度..

内容在您的幻灯片元素上呈现，您无法看到它，因为它的不透明度设置为0 ..因此您实际上会单击文本，而不是幻灯片元素。 溢出隐藏..实际上以这种方式剪辑溢出文本，您可以单击幻灯片。