如何显示/隐藏手风琴?

时间:2018-04-27 作者:Brandon Williams

您好,访问此网站:http://everestabercorn.com/ 如果你向下滚动到他们旁边的是2张图片,其中一张上面写着食物,另一张上面写着饮料。单击该图像时,文本会出现,再次单击时文本会消失。我该怎么做?

1 个回复
SO网友:demo7up

使用bootstraps数据切换首先确保您已经包含了适当的脚本和css,通常这4个应该位于您的标题中,如果its not included 已经

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
然后,您可以将正确的类添加到所讨论的图像/div中,如下所示:

    <div class="container">
     <h2>Simple Collapsible (click image)</h2>
     <img src="http://everestabercorn.com/wp-content/uploads/2016/03/9W4A4758.jpg" width="500px" class="btn btn-info" data-toggle="collapse" data-target="#demo">
     <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>
    </div>
你可以在这里看到它的实际效果。我做了一个快速演示:Simple Collapsible Div

结束

相关推荐

不只包括在主页上的JavaScript文件

我在加载自己的javascript文件时遇到问题,这个问题只出现在主页上,在其他页面上也可以。现在我对交互性有问题,因为只有在主页上我才能做到这一点。内部功能。php我以这种方式包含了自己的脚本: function monaco_assets_js(){ wp_enqueue_script(\'script\', get_stylesheet_directory_uri() . \'../js/script.js\', array(\'jquery\'), \'1.0.0\