Question

我有一个崩溃的div工作得非常好，但它开始扩展。

如何让div开始折叠？

另外，我怎样才能获得＆＃34;了解更多＆＃34;按钮将其文本更改为＆＃34;隐藏＆＃34; div何时扩展？

＆＃13;

$(function(){
    $('a.togglebtn').click(function(){
        $('#myContent3').stop().slideToggle(500);
        return false;
    });
});

＆＃13;

<div>
<a class="lead p-color learn-button togglebtn">
  <small>
    <span class="glyphicon glyphicon-plus">
    </span>&nbsp;Learn More
  </small>
</a>
</div>

<div id="myContent" class="row row-offset" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

Slightly changed your code. Try this.

<div>
<a class="lead p-color learn-button togglebtn">
  <small>
    <span class="glyphicon glyphicon-plus">
      </span>&nbsp;<span id="toggleText">Learn More</span>
  </small>
</a>
</div>

<div id="myContent" class="row row-offset" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>


$(function(){
    $('a.togglebtn').click(function(){
        if($("#toggleText").text()=="Learn More"){
            $("#toggleText").html("Hide")}
        else {$("#toggleText").html("Learn More")}
        $('#myContent').stop().slideToggle(500);
        return false;
    });
});


#myContent{display:none;}

希望这是你所期待的。

Answer 2

你需要这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collapsible Div</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<a class="lead p-color learn-button togglebtn" data-toggle="collapse" data-target="#myContent">
  <small>
    <span class="glyphicon glyphicon-plus">
    </span>&nbsp;Learn More
  </small>
</a>
</div>

<div id="myContent" class="row row-offset collapse" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="http://placehold.it/100x150" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>
</body>
</html>

只需将data-toggle =“collapse”和数据目标添加到元素<a> data-target属性将采用常用的css选择器（id，class，name等）。 .collapse设置为“”，开始折叠。

点击此处了解详情：w3schools

jquery - 崩溃的div开始崩溃了

2 个答案: