Question

我有一个textarea和一个相应的按钮，可以扩展或压缩textarea。它到目前为止工作但我不喜欢按钮改变它的位置，如果该区域扩大。如何避免这种情况并将按钮保持在其初始位置（即textarea的右上角并与其他元素内联）？

function resize_textarea(id) {
	var textarea = $(id);
	if (textarea.hasClass('compressed')) {
		textarea.removeClass('compressed').addClass('expanded');
		textarea.attr('rows', 10);
	} else {
		textarea.removeClass('expanded').addClass('compressed');
		textarea.attr('rows', 1);
	}
}

.compressed {
  resize: none;
}

.expanded {
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 1</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 2</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="input-group">
      <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea>
      <span class="input-group-btn">
        <button type="button" class="btn btn-primary" onclick="resize_textarea(textarea_id);">resize</button>
      </span>
    </div>
  </div>
  <div class="col-xs-2">
  	<button type="button" class="btn btn-primary">add</button>
  </div>
</div>

Answer 1

您只需将vertical-align: top添加到按钮周围的范围内，以使其保留在textarea的右上角。这也将使您的调整大小按钮与＆＃34;添加＆＃34;旁边的按钮。

＆＃13;

function resize_textarea(id) {
	var textarea = $(id);
	if (textarea.hasClass('compressed')) {
		textarea.removeClass('compressed').addClass('expanded');
		textarea.attr('rows', 10);
	} else {
		textarea.removeClass('expanded').addClass('compressed');
		textarea.attr('rows', 1);
	}
}

＆＃13;

.compressed {
  resize: none;
}

.expanded {
  resize: none;
}

#textarea_id + .input-group-btn {
  vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 1</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 2</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="input-group">
      <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea>
      <span class="input-group-btn">
        <button type="button" class="btn btn-primary" onclick="resize_textarea(textarea_id);">resize</button>
      </span>
    </div>
  </div>
  <div class="col-xs-2">
  	<button type="button" class="btn btn-primary">add</button>
  </div>
</div>

＆＃13;

Answer 2

要实现此目的，您只需将vertical-align: top添加到包含按钮的span即可。

请注意，您需要确保规则具有足够高的特异性，以覆盖现有的vertical-align设置。您可以通过向其添加多个类选择器来实现。尽可能避免使用!important。

另请注意，可以使用不显眼的事件处理程序和toggleClass()方法来整理JS代码。试试这个：

＆＃13;

$('.expand').click(function() {
  $('#textarea_id').toggleClass('compressed').attr('rows', function() {
    return $(this).hasClass('compressed') ? 1 : 10;
  });
});

＆＃13;

textarea.form-control {
  resize: none;
}

.compressed {
  resize: none;
}

.expanded {
  resize: none;
}

.input-group-btn.top-button {
  vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 1</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select option 2</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="input-group">
      <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea>
      <span class="input-group-btn top-button">
        <button type="button" class="btn btn-primary expand">resize</button>
      </span>
    </div>
  </div>
  <div class="col-xs-2">
    <button type="button" class="btn btn-primary">add</button>
  </div>
</div>

＆＃13;

如果调整相应的textarea大小，如何保持按钮的位置？

2 个答案: