javascript - 在 javascript 或 css 中定位前一个 div

Question

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

如果不是在 javascript 中，最好在 css 中单击或悬停“Cick me”时，我将如何只显示文本区域。谢谢大家

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

Answer 1

作为练习，您可以在纯 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();
});