Question

您好，我需要使用slideToggle jQuery函数。基本上，我知道slideToggle的工作原理，也知道如何处理不同的用法，但是我不清楚如何仅滑动到某些元素。这样做的原因是减少了滚动操作，因此用户不需要滚动太多，只需要显示一些信息即可。请参阅屏幕截图以获取参考和代码段。谢谢！

幻灯片之前：

幻灯片之后：

ActiveRecord::StatementInvalid: PG::InvalidForeignKey: ERROR:  there is no unique constraint matching given keys for referenced table "users"
: ALTER TABLE "attendances" ADD CONSTRAINT "attendances_user_id_company_id_fkey"
FOREIGN KEY ("user_id")
  REFERENCES "users" ("id")

.column_section2 {
  float: left;
  width: 80%;
  background-color: #F9F9F9;
  box-shadow: 
    5px 5px 10px 0 rgb(188, 188, 188, 0.45),
    -5px -5px 12px 0 rgb(255, 255, 255, 100);
  padding: 40px;
  margin-bottom: 25px;
  border-radius: 30px;
  margin-left: 1%;
}

label.labling {
  font-size: 18px !important;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #353535;
}

Answer 1

如果内联样式不是由jQuery创建的，则应在CSS文件中编写所有CSS语句。

此外，您不应使用slideToggle，而应检查单选输入的值，然后决定是否要显示更多内容。此外，slideToggle方法未包含在jQuery的精简版中。

我希望以下示例可以为您提供帮助。

$(document).ready(function() {

  function onTogglerChange(event) {
    var $input = $(event.currentTarget),
      $targets = $($input.closest('[data-toggle-target]').data('toggle-target'));

    if ($targets.length) {
      if ($input.val() == '1') {
        $targets.show();
      } else {
        $targets.hide();
      }
    }
  }

  var $togglers = $('[data-toggle-target]').find('input[type="radio"]').on('change', onTogglerChange);

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="column_section2">
  <i class="fas fa-briefcase"></i>
  <h2 class="bold" style="display: inline-block !important;">Job Details</h2><br><br>
  <div class="form-group row" style="margin-bottom: 3%;">
    <label for="job_number" class="col-sm-4 col-form-label labling">Job Number</label>
    <div class="col-sm-8">
      <input type="hidden" name="ans_job_number" value="" required />
      <input type="text" id="job_number" name="job_number" placeholder="Job number (Optional)" autofocus class="form-control text" value="">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-4 col-form-label labling">Company’s Client</label>
    <div class="col-sm-8" style="margin-top: 5px;">
      <label class="form-check-label labling" data-toggle-target=".account-holder" for="r1">
        <input id="r1" type="radio" name="is_account_holder" value="1"> Account Holder
      </label><br>
      <label class="form-check-label labling" data-toggle-target=".account-holder" for="r2">
        <input id="r2" type="radio" name="is_account_holder" value="0" checked> Not Account Holder
      </label>
    </div>
  </div><br>

  <div class="form-group row account-holder" style="display: none;">
    <label for="client_company" class="col-sm-4 col-form-label labling" style="white-space: normal !important;">Account Holder Name</label>
    <div class="col-sm-8 styled-select">
      <select style="width: 100% !important;" id="client_company" name="client_company" class="form-control" onchange="changeClientCompany(this.value)" required>
        <option></option>
      </select>
    </div>
  </div><br>

  <div class="form-group row account-holder" style="display: none;">
    <label for="ans-note" class="col-sm-4 col-form-label labling" style="white-space: normal !important;">Job originator notes</label>
    <div class="col-sm-8">
      <textarea class="form-control w-100 text area notes" id="ans-note" name="ans_note" rows="5" disabled></textarea>
      <h2 class="bold" style="font-size: 18px !important;">Customer Contact Details</h2><br>
      <div class="form-group row" style="margin-bottom: 3%;">
        <label for="customer_name" class="col-sm-4 col-form-label labling">Full Name</label>
        <div class="col-sm-8">
          <input id="customer_name" name="customer_name" type="text" required placeholder="Type Full Name" class="form-control text" value="" />
        </div>
      </div>
      <div class="form-group row" style="margin-bottom: 3%;">
        <label for="customer_phone" class="col-sm-4 col-form-label labling">Phone Number</label>
        <div class="col-sm-8">
          <input type="tel" id="customer_phone" name="customer_phone" required placeholder="Type Number" class="form-control text" value="" />
        </div>
      </div>
      <div class="form-group row" style="margin-bottom: 3%;">
        <label for="email" class="col-sm-4 col-form-label labling">E-mail</label>
        <div class="col-sm-8">
          <input type="email" id="email" name="email" placeholder="Type E-mail" class="form-control text" value="">
        </div>
      </div>
    </div>
  </div>
</div>

如何将slideToggle仅切换到div中的某些元素？

1 个答案: