单击一个 div 隐藏另一个 div答案

【问题标题】：Click one div to hide a different div单击一个 div 隐藏另一个 div
【发布时间】：2015-03-25 22:46:56
【问题描述】：

有很多关于 jQuery 中隐藏/显示函数的教程，但找不到任何关于我的问题的教程。我对编程并不陌生，jquery 对我来说是第一次。

当用户单击“链接 1”等时，我希望它...它隐藏了下面的“隐藏我”一词。目前它部分有效，但它只隐藏实际链接......而不是“隐藏我”这个词。我知道这与选择器有关...但不确定将选择器放在哪里。

谢谢。

$(document).ready(function(){
//user clicks on link
    $('a').click(function(){
         //hides the word below link but doesn't work
        $(this).hide();
    });


});

我试过了

 $(this).hide("panel");

和

  $("panel", this).hide();

谢谢

【问题讨论】：

您能否澄清一下您是要隐藏整个点击的.column，还是只隐藏链接和.box？

标签： jquery

【解决方案1】：

变化：

$(this).hide();

到：

$(this).parent().next('.box').hide();

$(this) 隐藏了你点击的内容

【讨论】：

【解决方案2】：

它不起作用，因为当你说 $(this) 时，它只会获取点击元素的对象，那就是 anchor 标签：

使用这个：

$(this).closest("div").hide();

代替

$(this).hide();

帮助你自己： 试试：

console.log($(this));

//这将显示$(this) 的作用：

更新：

根据您的 html 结构，您可以使用如下内容：

$(this).parent().next().hide()

演示

$(document).ready(function(){
    $('a').click(function(){
		 
         $(this).parent().next().hide();
    });
   
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div id="wrap">
		<div id="main">
			
			
			<div class="row">
				<div class="column">
					<p><a href="#" title="Click me!">Link 1</a></p>
				
					<div class="box">
						<p>Hide me</p>
					</div>
				</div>
				
				<div class="column">
					<p><a href="#" title="Click me!">Link 2</a></p>
				
					<div class="box">
						<p>Hide me</p>
					</div>
				</div>
				
				<div class="column">
					<p><a href="#" title="Click me!">Link 3</a></p>
				
					<div class="box">
						<p>Hide me </p>
					</div>
				</div>
			</div>
		</div>
	</div>

【讨论】：

谢谢，但它隐藏了它们。我只想隐藏它下面的单词。
所以您希望该链接可见？
@MokshShah 在 cmets 中澄清，你能更新你的答案吗

【解决方案3】：

怎么样：

$(this).closest('.column').find(".box").hide();

【讨论】：

锚的父级是段落标签
好吧，忘了那个。然后最接近的更好。（parent().parent() 不漂亮）

【解决方案4】：

请查看面板代表什么。在这

$("panel").hide();

您正试图隐藏面板中的所有标签尝试使用 id

$("#panel").hide();

或类名

$(".panel").hide();

或者如果这是“this”的子节点读入 https://api.jquery.com/children/

【讨论】：

【解决方案5】：

您可以使用closest 函数实现此目的，并使用.box 类隐藏childrens。 Jsfiddle demo 基于您的代码。

$(document).ready(function(){
    $('a').click(function(){
        $(this).closest('.column').children('.box').hide();
    });  
});

【讨论】：