单击文本时如何切换显示/隐藏div [重复]答案

【问题标题】：How to toggle show/hide div when text is clicked [duplicate]单击文本时如何切换显示/隐藏div [重复]
【发布时间】：2016-11-22 16:52:37
【问题描述】：

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

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

.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>

【问题讨论】：

你没试过js吗？

标签： javascript jquery html click

【解决方案1】：

使用 Jquery，使用带有 显示/隐藏元素的 toggle() 函数的 click 事件：

$('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">

【讨论】：