javascript - 在JavaScript或CSS中定位上一个div

HTML代码：

<div class="content">
   <textarea> hello.png </textarea>
</div>

<div class="content-btn">
   <a href="#" class="button"> Click me </a>
</div>

JavaScript代码：

  $(".button").click(function() {
    if ($(this).parent().previousSibling('.content').css('display') == 'none'){
      $('.content').hide();
      $(this).parent().previousSibling('.content').show();
    }else {
      $('.content').hide();
    }
  });

我最好怎么在css中单击或悬停“点击我”时只显示文本区域，如果没有javascript的话。谢谢你们

https://jsfiddle.net/uway5hhg/8/

最佳答案

作为练习，如果在textarea的正下方添加了关闭按钮，则可以在纯CSS（使用:target伪类和简单转换中的长时间延迟）中实现此效果。

http://codepen.io/anon/pen/JYoMRK

<div class="content" id="text">
   <textarea> hello.png </textarea><br />
   <a href="#close" class="button">Close</a>
</div>

<div class="content-btn">
   <a href="#text" class="button">Open</a>
</div>

的CSS

#text {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: opacity 0s 999999s;
}
#text:target {
  opacity: 1;
  height: auto;
  transition-delay: 0s;
}

#text:target ~ div a.button { display: none; }

无论如何，如果您寻找一种简单的jQuery方法，一个简单的toggle()就足够了（根据文本区域的初始条件，您可能不得不通过CSS隐藏.content元素）

https://jsfiddle.net/uway5hhg/39/

$(".button").click(function() {
    var content = $(this).parent().prev('.content');
    content.toggle();
});