Question

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

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

这是我试图扩展的文字

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

这是我的pss 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）和与.sc结合的新.auto-height类将覆盖高度css属性。
您在$ scope上拥有autoHeight属性 - 它未在任何地方定义在应用中，所以在应用生命周期的开始时它是undefined
ng-class =＆＃34; {＆＃39; auto-height＆＃39 ;: autoHeight}＆＃34;将设置自动高度类在元素上，只要$ scope上的autoHeight为真 - 就像我说的那样在开始之前，它是未定义的，这是假的 - 所以上课不会成功集。
最后点击按钮，更改autoHeight不是autoHeight，所以如果它是假的，它将变得真实 - 在下一次点击它会变得麻痹 - 所以基本上你切换它。 / p>

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

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

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

更新：

如果您只有一个按钮和多个ng重复，这是显示您正确方法的小提示： https://jsfiddle.net/pegla/j9eqvpzr/1/

我在你之前的评论中看到你有重复，所以我做了一个小提琴显示用ng-repeat和多个按钮做的方式，主要的是你需要在特定的数组元素上设置show / hide属性（使用$ index），我猜测了你的模型名称以及它的外观，但它绝对相似，你可以在你重复的数组上添加showHide属性，这是最好的方法但是如果你不能修改内部小提琴你有一个map函数，它只创建一个false值数组 - 与重复数组中的数量相同。

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

id="sc{{$index}}"

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

Answer 3

尝试使用这个，简化一个

＆＃13;

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

＆＃13;

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

＆＃13;

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>

我建议使用angularjs并删除jQuery，如果你使用jQuery这样的事情可以在angularjs中完成。你可以尝试下面纯粹在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>

使用jquery按钮单击扩展文本

4 个答案: