jquery - 为什么滑入 div 的 anchor 在 div 内的文本时不起作用

Question

我有一个 anchor ，当点击它时，一个带有 classbox 的 div 滑入。如果 div 中没有文本，这将非常有效。但是当我在 div 中放置一些文本时， anchor 不再起作用。谁能告诉我我做错了什么？

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');
});

这是没有文字的 fiddle 。你可以看到主播作品 https://jsfiddle.net/94uhxjgk/41/

这里我在 div 中放了一些文本， anchor 不再工作了 https://jsfiddle.net/94uhxjgk/43/

Answer 1

发生这种情况是因为您的文字太大了，它越过了您的点击区域，因此它永远不会触发点击事件，要解决此问题，您可以添加

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

fiddle

编辑

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

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