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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用Jquery，将click事件与显示/隐藏元素的 toggle() 函数一起使用：

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

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;