使用多个按钮和 div 切换折叠

【问题标题】：Toggle collapse with multiple buttons and div使用多个按钮和 div 切换折叠
【发布时间】：2016-11-16 23:02:36
【问题描述】：

真的很简单，我需要此代码中的按钮来切换关闭任何其他数据目标 div，这些 div 在单击按钮时可能会打开。

我试着弄乱手风琴函数等等，看起来很好的代码没有工作。我在这方面是个超级新手，一天中的大部分时间都花在了我通过反复试验而目瞪口呆的地步。

因此，如果您运行代码，您会看到许多按钮。当我单击这些按钮时，我只希望它们调用的数据出现在它们上方。如果您知道要调用什么来突出显示单击的按钮并在该数据可见时将其突出显示，那么您将获得奖励。我会满足于适当的切换。

这似乎是一个非常基本的问题，我已经搜索了很多，但我找不到任何与我的能力水平相差不远或真正相关的东西。我一直在搜索“切换数据目标多个按钮”和类似的组合。如果你有解决办法，请告诉我。

谢谢！ //干杯

<head>
<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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div id="intro" class="intro">
    <div class="text-content">
      {{ page.basic.content }}
    </div>
   
   <div class="panel-group" id="accordion">
  <div id="demo" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="panel-collapse collapse">
        <div class="panel-body">
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/ally">Become an Ally</a></p>
  </div>
     </div>
  
  <div id="demo1" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of the annual review</p>
      <p>-sticker pack</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
        <p><a class="button" href="/advocate">Become an Advocate</a></p>
    </div>
  </div>
     
  <div id="demo2" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
         <p><a class="button" href="/defender">Become a Defender</a></p>
    </div>

  <div id="demo3" class="panel-collapse collapse">

 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
       <p><a class="button" href="/guardian">Become a Guardian</a></p>
    </div>
  
  <div id="demo4" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
      <p>-personal liason at CJFE</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/campaigner">Become a Campaigner</a></p>
    </div>
  
  <div id="demo5" class="panel-collapse collapse in">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
 <p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
      <p>-personal liason at CJFE</p>
      <p>-VIP invitation to annual gala</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/champion">Become a Champion</a></p>
    </div>
       
   <button type="button"  class="button" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
   <button type="button" class="button" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
   <button type="button"  class="button" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
   <button type="button" class="button" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
   <button type="button" class="button" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
   <button type="button" class="button" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>

</body>

【问题讨论】：

  • 我尝试了来自stackoverflow.com/questions/40400604/… 的另一段代码，该代码在该页面上运行良好，但在我的页面上无法正常运行（不会折叠 div 或替换内容，只是显示它们并堆叠它们) 即使没有任何编辑。想知道这是否与我网站上的库或现有 CSS 覆盖某些内容有关？

标签： jquery html class button


【解决方案1】：

也许您想更改代码以使其更容易，但如果您想让它按您的方式工作，您需要隐藏所有 div，然后打开您的。

只需将其添加到您的标题中：

function hideall() {
    $('.panel-collapse').each(function() {                
        $(this).collapse('hide');
    });
}

并在所有 div 上放置一个 onclick 列表：

  <button type="button"  class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
   <button type="button"  class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>

这应该可以解决问题。

看这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript">
  	function hideall() {
		$('.panel-collapse').each(function() {
            $(this).collapse('hide');
		});
	}
  </script>
</head>
<body>
 <div id="intro" class="intro">
    <div class="text-content">
      {{ page.basic.content }}
    </div>
   
   <div class="panel-group" id="accordion">
  <div id="demo" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="panel-collapse collapse">
        <div class="panel-body">
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/ally">Become an Ally</a></p>
  </div>
     </div>
  
  <div id="demo1" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of the annual review</p>
      <p>-sticker pack</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
        <p><a class="button" href="/advocate">Become an Advocate</a></p>
    </div>
  </div>
     
  <div id="demo2" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
         <p><a class="button" href="/defender">Become a Defender</a></p>
    </div>

  <div id="demo3" class="panel-collapse collapse">

 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
       <p><a class="button" href="/guardian">Become a Guardian</a></p>
    </div>
  
  <div id="demo4" class="panel-collapse collapse">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
      <p>-personal liason at CJFE</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/campaigner">Become a Campaigner</a></p>
    </div>
  
  <div id="demo5" class="panel-collapse collapse in">
 <table>
    <tr>
      <th>
        <td style="text-align:left">
        <div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
 <p>-copy of annual review</p>
      <p>-sticker pack</p>
      <p>-t shirt</p>
      <p>-cofee mug or tote bag</p>
      <p>-personal liason at CJFE</p>
      <p>-VIP invitation to annual gala</p>
           </div>
          </td>
      <th>
        <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
      </th>
    </tr>
      </table>
      <p><a class="button" href="/champion">Become a Champion</a></p>
    </div>
       
   <button type="button"  class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
   <button type="button"  class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
   <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>

</body>
</html>

问候

【讨论】：

  • 成功了！非常感谢。没有想到onclick，但这很有意义。你摇滚！
猜你喜欢
  • 2014-08-03
  • 2018-07-07
  • 2016-01-08
  • 2017-03-16
  • 1970-01-01
  • 2019-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode