Question

我有以下CSS工具提示 - See this fiddle。

目前它显示在被徘徊时，并在不再被徘徊时消失。

如何在用户点击它时显示它，并在关闭按钮内部显示，所以当单击关闭按钮时它会消失（但是再次点击时会再次显示）？

HTML：

NSLog(@"%@",music);

CSS：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
      <table border="1">
        <col style="width:128px;" />
                <thead>
          <tr>
            <th>4</th>
          </tr>
        </thead>
        <tbody>
           <tr>
            <td>
                <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>

            </td>
          </tr>     
         </tbody>
      </table>

Answer 1

使用 Jquery

    <html><head>
    <script src=path/to/jquery.js></script>
    </head>
    <body>
    <button class=help_show>Show help</button>
    <div class=help>Help text
    <button class=help_close>X</button>
    </div>

  <script type="text/javascript">
  $(document).ready(function () {
  $('.help').fadeOut(0);
  $('button.help_close').click(function (e) {
    e.preventDefault();
    $('.help').fadeOut();
  });
  $('button.help_show').click(function (e) {
    e.preventDefault();
    $('.help').fadeIn();
  });
});
    </script>
    </body></html>

单击时打开CSS工具提示（加号关闭按钮）

1 个答案: