在javascript或css中定位前一个div [英] Targeting previous div in javascript or css

问题描述

HTML code：

HTML code:

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

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

Javascript代码：

Javascript code:

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

如果点击或优先在css中徘徊'Cick me'，我将如何显示textarea？但如果不是javascript。谢谢你们

How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys

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

推荐答案

作为练习，您可以在纯CSS中执行此效果（使用 ：target 伪类和简单转换中的长延迟）如果在textarea下面添加 close 按钮

As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea

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

---

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 元素，具体取决于初始值你的textarea的条件）

---

Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)

https：// jsfiddle。 net / uway5hhg / 39 /

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

这篇关于在javascript或css中定位前一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！