为什么当div内的文本时，滑动div的锚点不起作用

Question

我有一个锚点，当点击它时，一个带有 classbox 的 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

编辑

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

内容在您的 Slide Out 元素上呈现，您看不到它，因为它的不透明度设置为 0.. 所以您实际上将单击文本，而不是 Slide Out 元素.. 溢出隐藏..实际上以您可以单击滑出的方式剪辑溢出文本。