Question

我不确定为什么它不起作用。也许我想念一些简单的事情==我不知道为什么我想要的是当我使用一个图标显示1 div而不是其他div会隐藏。

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

的示例

这是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>

Answer 1

要设置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>

Answer 2

如果你想在其他人获得打开时折叠div尝试以下

--VISUAL--

＆＃13;

<!DOCTYPE html>

＆＃13;

bootstrap collapse div show 1 hide 1

2 个答案: