小编Vin*_*mba的帖子

我正在使用bootstrap手风琴作为创建表单的独特方式.基本上,该表格在其自己的手风琴面板中各有7个部分.现在我正好想要它们全部倒塌的地方,当你打开第一架手风琴时,有一个按钮连接到第二个手风琴.这正是我希望它的工作方式.但是有没有办法隐藏其他手风琴面板,直到选择"下一个"按钮？

例如,当我加载页面时,我只是希望他们能够看到"1.选择功能",当他们打开它并按下下一个按钮时选择他们的项目,当第二个面板变得可见并打开时.等等.

我假设我可以做一些我隐藏它们的按钮并且按钮触发它可见？我一直在寻找这样的例子但我找不到任何东西.我知道这个网站不是代码编写服务,所以如果有人可以指出我正确的方向,我可以做其余的事情.

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div> …

我试图剪掉我网站上大部分 div 元素的右上角。这些 div 都是不同的大小。我正在尝试找到一种响应方式来做到这一点。我在这里遇到了这个网站：http : //bennettfeely.com/clippy/，它允许你剪出一个自定义的多边形形状。

这是我到目前为止所拥有的：

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
}

/* Center the demo */
html, body { height: 100%; }
body {
   background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
	display: flex;
	justify-content: center;
	align-items: center;
}

<div></div>

我的问题是我正在尝试阅读这些剪报并找出如何使右上角的完美 45 度角切掉。截至目前，这个多边形是我徒手创建的。我想看看我需要使用多少百分比才能从右上角切出完美的 45 度角。

使用该解决方案，我将为我的大多数 div、按钮和图像添加截止值。

我发现在 Stack Overflow 上使用具有绝对位置的左边界和右边界的其他方法可以做到这一点，但问题是我需要 div 截止是透明的，因为其中一些有背景图像。

这是一个已设置的 JS Fiddle： …

我在整个div可点击时遇到了一些麻烦.现在我有一个图像,当你将鼠标悬停在它上面时,另一个div会向上滑动信息.我想让整个div可点击.例如,检查JsFiddle

这是我到目前为止:

// HTML

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <a class="btn btn-success" href="http://www.google.com">Click Here </a>
                </div>
            </a>
    </div>
</div>

// CSS

.pre-inner {
    position: relative;
    max-width: 300px;
    overflow: hidden;
    margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65); …