在单击其他html元素时隐藏以前使用jquery显示的html元素_Jquery

在单击其他html元素时隐藏以前使用jquery显示的html元素

jquery

在单击其他html元素时隐藏以前使用jquery显示的html元素,jquery,Jquery,我有一个工作站点，当单击一个标题时，会显示一个工作标题列表。以前设置为display的某些元素集：“none”使用jqueryshow（）函数显示。单击新职务时，如何再次隐藏这些元素？那么，当一个新的工作被扩展时，它似乎崩溃了？链接到更大的JSFIDLE：但我相信包含了下面代码中最重要的部分 <body> <div class="job"> <h2><a class="job_lin

我有一个工作站点，当单击一个标题时，会显示一个工作标题列表。以前设置为

display的某些元素集：“none”

使用jquery

show（）

函数显示。单击新职务时，如何再次隐藏这些元素？那么，当一个新的工作被扩展时，它似乎崩溃了？链接到更大的JSFIDLE：但我相信包含了下面代码中最重要的部分

<body>
                <div class="job">
                    <h2><a class="job_link" href="#">Accountant  - ABC Bank</a></h2>
                    <p class="start_hidden job_p">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
                    <p class="start_hidden">salary: 12</p>
                </div>
                <div class="job">
                    <h2><a class="job_link" href="#">Doctor  - XYZ Hosptial</a></h2>
                    <p class="start_hidden job_p">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
                    <p class="start_hidden">salary: 12</p>
                </div>
                <div class="job">
                    <h2><a class="job_link" href="#">Teacher  - ABC School</a></h2>
                    <p class="start_hidden job_p">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
                    <p class="start_hidden">salary: 12</p>
                </div>

</html>

css:

没问题！您只需在显示必要元素之前隐藏所有内容：

$(document).ready(function(){
    $(".job_link").click(function(){
        $(this).parents('.job').find(".start_hidden").show();
    });
});

$(document).ready(function(){
    $(".job_link").click(function(){
      $(".start_hidden").hide(); // Add this line
      $(this).parents('.job').find(".start_hidden").show();
    });
});

祝你好运

甚至可以删除

start\u hidden

。听起来好像所有的工作描述都应该包装在一个类中，例如

工作描述

，通过CSS设置为

display:none

。然后单击父链接时，运行

$（'.job description'）.hide（）$（“.job description”，$（this））.show（）以（1）隐藏已显示的内容，然后（2）显示新内容。
$(document).ready(function(){
    $(".job_link").click(function(){
      $(".start_hidden").hide(); // Add this line
      $(this).parents('.job').find(".start_hidden").show();
    });
});