gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:36 24 4
gpt4 key购买 nike

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/

最佳答案

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

关于javascript - 在 javascript 或 css 中定位前一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32395914/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com