使用 jquery 单击按钮扩展文本

Question

我有一个特定高度的 div 显示一些文本。我正在尝试使用 jquery 扩展它。 这是我的按钮代码

 <button class="btn btn-blog pull-right marginBottom10" id="expand">More Information</button>

这是我要扩展的文本

 <p id="sc">
  {{x.content}}
 </p>

这是我的 css 给 p

#sc{
height: 7.5em;
padding: 2px;
overflow: hidden;}

这是我的脚本

  <script> $(document).ready(function(){document.getElementById("expand").onclick = function() { document.getElementById("sc").style.height = 'auto';}});</script>

我正在使用 angularJS。 但是高度自动属性在 div 上不起作用。当我单击按钮时没有任何反应 请帮忙

Answer 1

在 angularJs 本身中，您可以像下面这样（不需要 jQuery）：-

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.myFunc = function() {
      angular.element(document.querySelector('#sc')).css('height', 'auto');
    };
  }]);

#sc{
  height: 7.5em;
  padding: 2px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

  <div ng-controller="myCtrl">
    <button class="btn btn-blog pull-right marginBottom10" id="expand" ng-click="myFunc()">More Information</button>
    <p id="sc">
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>

但是如果你想在 jQuery 中做的话：-

1.确保在脚本代码之前添加了 jQuery 库。

2.不要将 jQuery 语法与 javascript 语法混用。

像下面这样：-

$(document).ready(function(){
  $("#expand").on('click',function() { 
    $("#sc").css({'height':'auto'});
  });
});

#sc{
height: 7.5em;
padding: 2px;
overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-blog pull-right marginBottom10" id="expand">More Information</button>

 <p id="sc">
 What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>

注意：- 内容需要超过您提到的高度，否则所有文本最初都会显示，并且按钮单击将不起作用。

Answer 2

做到这一点的唯一正确方法是在 AngularJS 中进行，即使它们有效 - 所有答案都在 AngularJS 中以 jQuery 方式进行，这不是一个可行的方法。如果您想要 jQuery 答案 - 从中​​删除 AngularJS 标记，您将获得 jQuery 答案 - 即使其他答案涵盖了这一点。

第一件事 - 不要将 id 用于样式，以后很难覆盖它 - 所以设置类。如果你喜欢这个 id，你可以保留它，但在课堂上让你的样式像这样：

HTML：

<p id="sc" class="sc">
  {{x.content}}
</p>

CSS - 我为以后添加了auto-height 类：

.sc {
  height: 7.5em;
  padding: 2px;
  overflow: hidden;
}
.sc.auto-height {
  height: auto;
}

所以 AngularJS 有 ng-style 和 ng-class，你可以使用它们来设置基于参数的样式，你可以像这样在你的元素上设置：

<p id="sc" class="sc" ng-class="{'auto-height':autoHeight}">
  {{x.content}}
</p>

现在考虑到这一切都在 AngularJS 中，正如你所说的（你有某种控制器包裹着这段代码）你需要做的就是：

<button class="btn btn-blog pull-right marginBottom10" id="expand" ng-click="autoHeight=!autoHeight">More Information</button>

解释这是如何工作的：

• 你在 css 中有 2 个类：.sc 这是你的类（之前是 id) 和新的.auto-height 与.sc 结合的类将 覆盖高度 css 属性。

• 您在 $scope 上有 autoHeight 属性 - 它没有在任何地方定义 在应用程序中，因此在应用程序生命周期开始时它是 undefined

• ng-class="{'auto-height': autoHeight}" 将设置自动高度类 只要 $scope 上的autoHeight 为真，就在元素上 - 正如我所说 在开始之前它是未定义的，这是虚假的 - 所以类不会 设置。

• 最后 ng-click 按钮将 autoHeight 更改为不是 autoHeight，所以如果它是假的，它会变成真的 - 下次点击它会变成假的 - 所以基本上你切换它。

所有这些都没有经过测试，但我相信只要你的应用程序中有 AngularJS，它就可以工作。如果你没有它，你可以在以前的答案中检查它，他们在那里有它。您也可以在此处使用ng-style，因此请随时查看以下文档。

ng-class 的文档： https://docs.angularjs.org/api/ng/directive/ngClass

ng-style 的文档： https://docs.angularjs.org/api/ng/directive/ngStyle

更新：

这是向您展示正确方法的小提琴 - 如果您只有一个按钮和多个 ng-repeats： https://jsfiddle.net/pegla/j9eqvpzr/1/

我在你之前的 cmets 中看到你有 ng-repeat，所以我做了一个小提琴展示了使用 ng-repeat 和多个按钮的方法，这里的主要内容是你需要在特定数组元素上设置显示/隐藏属性（使用 $index），我猜测了您的模型名称以及它的外观，但它绝对相似，您可以在重复数组上添加 showHide 属性，这是最好的方法，但如果您无法在小提琴内部进行修改，那么您有一个仅创建错误值数组的映射函数 - 与重复数组中的数量相同。

如果你有 ng-repeat 你应该记住的一件事你不能在元素上设置 id - 每个页面每个元素的 id 应该是唯一的 - 所以页面上只能存在一个同名的 id，所以我删除了身份证。如果你需要 id 设置它：

id="sc{{$index}}"

https://jsfiddle.net/pegla/j9eqvpzr/3/

Answer 3

也试试这个，简化的

function clickhere() { 
	document.getElementById("sc").style.height = 'auto';
}

<p id="sc">
   {{x.content}}
</p>
<button class="btn btn-blog pull-right marginBottom10" id="expand" onclick="clickhere();">More Information</button>

Answer 4

function TodoCtrl($scope) {
 $scope.x = [{
    		'content':'Test',
              },
             {
    		'content':'Test1',
              },
              {
    		'content':'Test2',
             }];
  $scope.buttonClick = function(id){
      angular.element(document.querySelector('#sc'+id)).css('height','auto');
  }
}

.sc{
height: 7.5em;
padding: 2px;
overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-repeat="y in x">
      <p id="sc{{$index}}" class='sc'>
        {{y.content}}
      </p>
      <button class="btn btn-blog pull-right marginBottom10" id="expand" ng-click="buttonClick($index);">More Information</button>
    </div>
  </div>
</div>

如果您将 jQuery 用于可以在 angularjs 中完成的事情，我建议使用 angularjs 并删除 jQuery。您可以尝试以下纯 angularjs 代码，并通过简单的步骤执行相同的操作。我根本没有使用过 jQuery。希望对你有帮助。

function TodoCtrl($scope) {
  $scope.x = {
    'content': 'Test'
  };
  $scope.buttonClick = function() {
    angular.element(document.querySelector('#sc')).css('height', 'auto')
  }
}

#sc {
  height: 7.5em;
  padding: 2px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="TodoCtrl">
    <p id="sc">
      {{x.content}}
    </p>
    <button class="btn btn-blog pull-right marginBottom10" id="expand" ng-click="buttonClick()">More Information</button>
  </div>
</div>