文章/答案/技术大牛

发布

社区首页 >问答首页 >引导程序折叠div显示1隐藏1

问引导程序折叠div显示1隐藏1
EN

Stack Overflow用户

提问于 2016-06-05 02:12:40

回答 2查看 662关注 0票数 0

我不知道为什么它不工作。也许我错过了一些简单的thing==，我不确定为什么我想要的是当我使用一个图标时显示1div而不是其他div会隐藏。

现在，如果我单击第一个图标，显示一个div如果我单击第二个图标，div将会显示，但第一个图标div将不会隐藏

以下是enter link description here的示例

这是html代码

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="right-lower-container accordion" id="myGroup">
  <div class="testing-notification">
    <span class="glyphicon glyphicon-comment notification-bar accordion-toggle" data-toggle="collapse" data-target="#testing1" data-parent="#myGroup"></span>
    <div id="testing1" class="collapse notification-block">
      testing 1
    </div>
  </div>
   <div class="testing-notification">
  <span class="btn glyphicon glyphicon-bell notification-bar accordion-toggle" data-toggle="collapse" data-target="#testing2" data-parent="#myGroup"></span>
  <div id="testing2" class="collapse notification-block">
    testing2
  </div>
  </div>
  <a class="option-font" href="#">
    <span>
      new items
    </span>
  </a>
  <a class="option-font" href="#">
    <span class="glyphicon glyphicon-search">
       search
    </span>
  </a>
</div>

下面是我的css代码

.right-lower-container {
  height: 40%;
  width: 100%;
  display: block;
  vertical-align: top;
  text-align: right;
}

.notification-bar {
  color: black;
  margin-right: 2.5%;
}

.notification-bar:hover {
  color: gray;
}

.notification-block {
  width: 100px;
  height: 100px;
}

.testing-notification {
  display: inline-block;
  width: 20%;
}

#testing1,#testing2{
  background-color:red;
  width:100px;
  height:200px;
}

.option-font,
.notification-bar,
.testing-notification {
    display: inline-block;
    vertical-align: top;
}

其他问题

如何使用bootstrap设置输入类型的样式？

这是html代码

<form method="post" action="">
   <input type = "submit" clas="btn btn-default btn-direct-message" value="message" name="chat">
</form>

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2016-06-05 03:29:05

要样式化Bootstrap组件，需要将输入包装到"form-group“类中

<form method="post" action="">
      <div class="form-group">
        <input type = "submit" clas="btn btn-default btn-direct-message"     value="message" name="chat">
     </div>
</form>

票数 0

Stack Overflow用户

发布于 2016-06-05 03:37:44

如果您想在打开一个div时折叠另一个div，请尝试以下方法

<!DOCTYPE html>

	<!DOCTYPE html>
	<html>
	<head>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	</head>
	<body>

	<div class="container">
	  <h2>Accordion Example</h2>
	  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
	  <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="#collapse1">Collapsible Group 1</a>
			</h4>
		  </div>
		  <div id="collapse1" class="panel-collapse collapse in">
			<div class="panel-body">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>
		</div>
		<div class="panel panel-default">
		  <div class="panel-heading">
			<h4 class="panel-title">
			  <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
			</h4>
		  </div>
		  <div id="collapse2" class="panel-collapse collapse">
			<div class="panel-body">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>
		</div>
		<div class="panel panel-default">
		  <div class="panel-heading">
			<h4 class="panel-title">
			  <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
			</h4>
		  </div>
		  <div id="collapse3" class="panel-collapse collapse">
			<div class="panel-body">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>
		</div>
	  </div> 
	</div>
		
	</body>
    </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37633510

复制

相似问题

问引导程序折叠div显示1隐藏1
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序折叠div显示1隐藏1EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序折叠div显示1隐藏1
EN