Question

HTML code：

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

我怎样才会出现在#c; cick me＆＃39;最好是在css中点击或悬停，但如果不是javascript。谢谢你们

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

Answer 1

作为练习，如果在textarea close 按钮，你可以在纯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元素，具体取决于textarea的初始条件）

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

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

Answer 2

据我所知，没有办法捕捉CSS中的兄弟姐妹。

但它适用于jQuery，这是你稍微改变的代码：

  $(".button").on('click', function() {
      var ele = $(this),
          par = ele.parent(),
          sbl = par.prev();
    if (sbl.css('display') == 'none'){
      $('.content').hide();
      sbl.show();
    }else {
      $('.content').hide();
    }
  });

工作示例在这里：https://jsfiddle.net/y0ab3n0L/

Answer 3

那应该做的就是

JS：

$(".button").click(function() {
    var contentBtn = $(this).parent(".content-btn");
    var content = $(contentBtn).prev(".content");
    var textarea = $(content).find("textarea");
    $(textarea).toggle();
});

或事件更短：

$(".button").click(function() {
    $(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});

https://jsfiddle.net/uway5hhg/21/

希望这会有所帮助：）

Answer 4

如果你不想使用javascript，Fabrizio提供的解决方案是一个很好的解决方案。但是，您也可以修改DOM以产生类似的效果。

<div class="content-wrapper">
    <div class="content" id="text">
        <textarea>hello.png</textarea>
    </div> 

    <a href="#text" class="button">Click me</a>
</div>

CSS
.content {
    display:none;
}
.content-wrapper:hover .content {
    display:block;
}
.content-wrapper:hover .button {
    display:none;
}

https://jsfiddle.net/2Lsszgqz/

Answer 5

没有这样的CSS伪元素 - a.button:click，因此只有JS解决方案可以使用（ 而不更改HTML结构 ）。您还可以使用:focus CSS伪类来关闭它。但是你将缺少CSS中的一个级别，然后显示textarea。所以，只有解决方案是使用JS。

在您的示例JS代码中，您使用的是.previousSibling('.content')本机JS，您在jQuery对象上调用它，这就是为什么它不起作用。相当于此函数的jQuery是.prev('.content')

正确的语法将是 -

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

Working Fiddle

在javascript或css中定位前一个div

5 个答案: