时间戳

首页 > 解决方案 > 当我在开瓶器内放置表格或 div 元素时，如何单击我的开瓶器并显示我的内容

javascript - 当我在开瓶器内放置表格或 div 元素时，如何单击我的开瓶器并显示我的内容

问题描述

这是我的 javascript

$(document).ready(function () {
    $(".show-content").hide();

    $(".opener").click(function () {
        $(this).parent().next(".show-content").slideToggle();
        return false;
    });
});

这是我的旧 html

  <tr>
  <td>
      <h2 id="000111(A)">000111(A)</h2>
  </td>
  <td>
      <p>
          <a href="#" class="opener">
              <img src="images/000111.jpg" alt="000111" />                  
          </a>
      </p>
      <div class="show-content">
          <table
              class="vertical-navbox nowraplinks vcard hlist"
              style="
                  font-size: 105%;
                  width: 100%;
                  text-align: left;
                  text-align: center;
                  background: #f8f9fa;
                  border: 1px solid #aaa;
                  padding: 0.2em;
                  border-spacing: 0.4em 0;
                  text-align: center;
                  line-height: 1.4em;
                  font-size: 88%;
              "
          >
              <tbody>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Calculations
                              </a>
                          </p>
                          <div class="show-content">
                            <a href="#000111(O)">See Qn 000111(O)</a>
                          </div>
                      </th>
                  </tr>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Adding a voltmeter across Node 1 and 2
                              </a>
                          </p>
                          <div class="show-content">
                              <a href="#000111(O)">See Qn 000111(O)</a>
                          </div>
                      </th>
                  </tr>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Preview our video explanation only available to our subscribers
                              </a>
                          </p>
                          <div class="show-content">
                            <a href="#000111(O)">See Qn 00011(O)</a>
                          </div>
                      </th>
                  </tr>
              </tbody>
          </table>
      </div>
  </td>

隐藏和显示功能适用于旧 html 但是，当我将 html 替换 <a href="#" class="opener"> <img src="images/000111.jpg" alt="000111" /> </a>
为

`<a href="#" class="opener">
  <div class="PictureRow">
  <div class="PictureColumn">
    <b>Circuit 000235</b>
    <img src="images/000235(LAMP).jpg" alt="000235(LAMP)" style="width:100%"/>
  </div>
  <div class="PictureColumn">
    <b>Circuit 000485</b>
    <img src="images/000485(LAMP).jpg" alt="000485(LAMP)" style="width:100%" />
  </div>
</div>

`
新的 html 不起作用

例如我的新 html

  <tr>
  <td>
      <h2 id="000111(A)">000111(A)</h2>
  </td>
  <td>
      <p>
        <a href="#" class="opener">
        <div class="PictureRow">
            <div class="PictureColumn">
              <b>Circuit 000235</b>
              <img src="images/000235(LAMP).jpg" alt="000235(LAMP)" style="width:100%"/>
            </div>
            <div class="PictureColumn">
              <b>Circuit 000485</b>
              <img src="images/000485(LAMP).jpg" alt="000485(LAMP)" style="width:100%" />
            </div>
          </div>
         </a>
      </p>
      <div class="show-content">
          <table
              class="vertical-navbox nowraplinks vcard hlist"
              style="
                  font-size: 105%;
                  width: 100%;
                  text-align: left;
                  text-align: center;
                  background: #f8f9fa;
                  border: 1px solid #aaa;
                  padding: 0.2em;
                  border-spacing: 0.4em 0;
                  text-align: center;
                  line-height: 1.4em;
                  font-size: 88%;
              "
          >
              <tbody>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Calculations
                              </a>
                          </p>
                          <div class="show-content">
                            <a href="#000111(O)">See Qn 000111(O)</a>
                          </div>
                      </th>
                  </tr>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Adding a voltmeter across Node 1 and 2
                              </a>
                          </p>
                          <div class="show-content">
                              <a href="#000111(O)">See Qn 000111(O)</a>
                          </div>
                      </th>
                  </tr>
                  <tr>
                      <th>
                          <p>
                              <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Preview our video explanation only available to our subscribers
                              </a>
                          </p>
                          <div class="show-content">
                            <a href="#000111(O)">See Qn 00011(O)</a>
                          </div>
                      </th>
                  </tr>
              </tbody>
          </table>
      </div>
  </td>

使用新的 html，我的 class="opener" 中的内容会显示，但我的 class="show-content" 中的内容无法打开。我如何使它像我的旧 html 一样显示我的 class="opener" 中的内容，但我的 class="show-content" 中的内容可以打开

标签： javascripthtml

解决方案

您的代码似乎只需稍作改动即可工作。但是，如果这HTML是从后端填充的，那么使用id和data属性将一些元素绑定在一起会更好。例如：

<a href="#" class="opener"> --> <a href="#" class="opener" data-open="show-content-0">
<div class="show-content"> --> <div class="show-content" id="show-content-0">

上述方式会将您更改Javascript为以下内容：

$(document).ready(function() {
  $(".show-content").hide();

  $("a[data-open]").click(function() {
    $("#"+$(this).data("open")).slideToggle();
    return false;
  });
});

不过，这里是您的代码示例，稍作改动。

$(document).ready(function() {
  $(".show-content").hide();

  $(".opener").click(function() {
    $(".show-content").slideToggle();
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td>
      <h2 id="000111(A)">000111(A)</h2>
    </td>
    <td>
      <p>
        <a href="#" class="opener">
          <div class="PictureRow">
            <div class="PictureColumn">
              <b>Circuit 000235</b>
              <img src="images/000235(LAMP).jpg" alt="000235(LAMP)" style="width:100%" />
            </div>
            <div class="PictureColumn">
              <b>Circuit 000485</b>
              <img src="images/000485(LAMP).jpg" alt="000485(LAMP)" style="width:100%" />
            </div>
          </div>
        </a>
      </p>
      <div class="show-content">
        <table class="vertical-navbox nowraplinks vcard hlist" style="
                  font-size: 105%;
                  width: 100%;
                  text-align: left;
                  text-align: center;
                  background: #f8f9fa;
                  border: 1px solid #aaa;
                  padding: 0.2em;
                  border-spacing: 0.4em 0;
                  text-align: center;
                  line-height: 1.4em;
                  font-size: 88%;
              ">
          <tbody>
            <tr>
              <th>
                <p>
                  <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Calculations
                              </a>
                </p>
                <div class="show-content">
                  <a href="#000111(O)">See Qn 000111(O)</a>
                </div>
              </th>
            </tr>
            <tr>
              <th>
                <p>
                  <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Adding a voltmeter across Node 1 and 2
                              </a>
                </p>
                <div class="show-content">
                  <a href="#000111(O)">See Qn 000111(O)</a>
                </div>
              </th>
            </tr>
            <tr>
              <th>
                <p>
                  <a href="#" class="opener" style="font-size: 105%; background: transparent; text-align: center;">
                                  Preview our video explanation only available to our subscribers
                              </a>
                </p>
                <div class="show-content">
                  <a href="#000111(O)">See Qn 00011(O)</a>
                </div>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</table>

推荐阅读