Question

我一整天都在浏览，试图找到并回答我的问题。我现在很难过，一直跑到墙上。关于以手风琴式（bootstrap）显示div有很多其他主题，但我的标记与我看到的例子有很大的不同。我的页面设置方式是彼此相邻的3列，然后是将出现在这些列下方的div（在下一行）。我一直在遇到很多父，子和下一个脚本。

snapshot image
Better description

我的第一个问题是：我的标记是否可以实现这一点？我尝试过使用.accordion-group类和数据父级技术，但什么也没做。事先打开的其他div仍然存在，必须手动关闭。

其次，我怎样才能做到这一点？

我的标记如下：

<section class="no-padding" id="products">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" data-toggle="collapse" data-target="#drums1">
                    <img src="" alt="img-1" class="img-responsive">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">Category<br>Click for details</div>
                            <div class="project-name">Rock Drums</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">

            </div>
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" data-toggle="collapse" data-target="#drums3">
                    <img src="" alt="img-3" class="img-responsive">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">Hip-Hop Drums<br></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="product-descriptions collapse" id="drums1">
          <div class="row">
              <div class="col-md-6">Buy and description here</div>
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
          </div>
        </div>
        <div class="product-descriptions collapse" id="drums2">
          <div class="row">
              <div class="col-md-6">Buy and description here</div>
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
          </div>
        </div>
        <div class="product-descriptions collapse" id="drums3">
          <div class="row">
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
              <div class="col-md-6">Buy and description here</div>
          </div>
        </div>
    </div>
</section>

.product-descriptions个班级只设置了display:none。

编辑：第二张图片是更好的描述。红色十字架是＆＃34;链接＆＃34; .portfolio-box将打开div（绿色框 - .product-descriptions）。每个红色框都有自己的对应div。绿色框被隐藏，直到通过单击红色框显示。我希望在单击其他红色框时更改相应的绿色框。

Answer 1

这是一个简单的bootstrap手风琴的例子：当你点击一个时，它会关闭其他手风琴。共有3个面板。默认情况下，第一个面板使用＆＃34;在＆＃34;。

中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在点击时切换（或滑动）特定div并隐藏其他div

1 个答案: