使用jQuery隐藏内部div

Question

    <a href="#"> Link1  </a>  
    <div id="parent">
         <div id="child1">
                    Here is the Child One
         </div>
         <div id="child2">
                    Here is the Child Two
         </div>
    </div>

我该如何使用jQuery隐藏child1 div？ 更新 我想在单击Link1时隐藏child1。

- user1847145

---

哪个链接？我看不到链接。 - Dipesh Parmar

请根据您编辑后的问题考虑我的修改。 - GautamD31

显示链接的标记。 - Lucky Soni

Answer 1

为什么要使用jQuery？

CSS

 #child1{
   display: none;
 }

如果您真的想使用jQuery:

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

如果您想要在点击时隐藏： 因为您在标记中使用了ID，所以这非常简单。

$("#parent").click(function() {
   $("#child1").hide();
});

- Lucky Soni

Answer 2

$('div#parent > div#child1').hide(); 

上述代码用于隐藏 #parent 元素的直接子元素。

对于点击事件：

$('YOURLINK').on('click',function()
{
    $('div#parent > div#child1').hide();
});

- Dipesh Parmar

Answer 3

尝试使用。

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

或者你可以尝试像这样。

$("#child1").css('display','none');

基于您编辑后的问题，应该是这样的：

$("#link1").click(function(e){
     e.preventDefault();
     $("#child1").hide();
});

您可以在http://jquery.com/中了解jQuery的功能。

您可以在http://api.jquery.com/selector/中了解jQuery选择器。

- GautamD31

Answer 4

如果你想隐藏 div 内的第一个子元素：

$('#link1ID').click(function(){        
    $('div#parent div:first').hide();    
});

如果您想隐藏使用子ID：-

 $('#link1ID').click(function(){            
        $('div#parent div#child1').hide();        
 });

- ssilas777

---

非常感谢，它只会隐藏第一个子元素，如果我想按子元素ID隐藏怎么办？ - user1847145

Answer 5

$(document).ready(function(){
     $("#link1").on('click',function(){
         $("#child1").hide();
     });
});

同样适用于child2。

- Devang Rathod

Answer 6

只需选择并隐藏子元素，就像这样：

$("#parent").children().hide();

然后，您可以随时选择并显示/隐藏/处理子元素。

- James

Answer 7

这将在点击link1时隐藏child1，在点击link2时隐藏child2

演示

$('a').click(function(e){
    e.preventDefault()
    $(this).closest('div').hide();
});

如果你想在父级 div 下的任何链接上点击时隐藏 child1

$('a').click(function(e){
    e.preventDefault()
    $(this).parentsUntil('parent').find('#child1').hide();
});

HTML

<div id="parent">
     <div id="child1">
         <a href="#">link1</a>
     </div>
     <div id="child2">
         <a href="#">link2</a>
     </div>
</div>

- Pragnesh Chauhan