javascript - 单击文本时如何切换显示/隐藏 div

Question

这个问题已经有答案了:

JavaScript hide/show element (15 个回答)

已关闭 7 年前。

我已经使用 HTML 和 CSS 实现了一些文本，但我想在单击文本时隐藏该文本。

在下面的示例中，当单击查看联系人详细信息时，应该显示文本，并且当单击相同的 View 联系详细信息时也应该隐藏文本。

.fWrap .contactInfo.tableStr {
    margin-top: 10px;
    overflow: hidden;
}
.tableStr {
    clear: both;
}
.inWrap * {
    box-sizing: border-box;
    }
    .jdRow {
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

.jdCell {
    font-weight: 700;
    width: 120px;
    margin-right: 20px;
    float: left;
    text-align: right;
    display: inline-block;
}

.jdCell2 {
    float: left;
    max-width: 83%;
    color: #444;
    display: block;
}
.inWrap * {
    box-sizing: border-box;
}

<div class="fWrap posR">
    <a href="javascript:void(0)" class="contDetail f12" id="contDetail">View Contact Details</a>
    <div class="contactInfo tableStr" id="contactInfo" style="display: block;">
        <div class="jdRow">
            <span class="jdCell">Company Name</span>
            <span class="jdCell2">Marvist Digital Marketing KPO</span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Executive Name</span>
            <span class="jdCell2">Recruiting Department</span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Website</span>
            <span class="jdCell2 tWrap">
                <a href="http://www.marvist.co.in" target="_blank" rel="nofollow">http://www.marvist.co.in</a>
            </span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Email</span>
            <span class="jdCell2">jobs@marvist.co.in</span>
        </div>
    </div>
    <div class="shrNprint"></div>
</div>

Answer 1

使用 Jquery，将 click 事件与 toggle() 结合使用 显示/隐藏元素的功能:

$('body').on('click','#contDetail', function(){
    $('#contactInfo').toggle();
})

希望这有帮助。

$('body').on('click','#contDetail', function(){
  $('#contactInfo').toggle();
})

.fWrap .contactInfo.tableStr {
  margin-top: 10px;
  overflow: hidden;
}
.tableStr {
  clear: both;
}
.inWrap * {
  box-sizing: border-box;
}
.jdRow {
  float: left;
  margin-bottom: 15px;
  width: 100%;
}

.jdCell {
  font-weight: 700;
  width: 120px;
  margin-right: 20px;
  float: left;
  text-align: right;
  display: inline-block;
}

.jdCell2 {
  float: left;
  max-width: 83%;
  color: #444;
  display: block;
}
.inWrap * {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fWrap posR">
  <a href="javascript:void(0)" class="contDetail f12" id="contDetail">View Contact Details</a>
  <div class="contactInfo tableStr" id="contactInfo" style="display: block;">
    <div class="jdRow">
      <span class="jdCell">Company Name</span>
      <span class="jdCell2">Marvist Digital Marketing KPO</span>
    </div>

    <div class="jdRow">
      <span class="jdCell">Executive Name</span>
      <span class="jdCell2">Recruiting Department</span>
    </div>

    <div class="jdRow">
      <span class="jdCell">Website</span>
      <span class="jdCell2 tWrap"><a href="http://www.marvist.co.in" target="_blank" rel="nofollow">http://www.marvist.co.in</a></span>
    </div>
    <div class="jdRow">
      <span class="jdCell">Email</span>
      <span class="jdCell2">jobs@marvist.co.in</span>
    </div>

  </div>
  <div class="shrNprint">