时间戳

首页 > 解决方案 > 如何将滑动切换到 div 中的某些元素？

javascript - 如何将滑动切换到 div 中的某些元素？

问题描述

您好，我需要使用 slideToggle jQuery 函数。基本上我知道 slideToggle 是如何工作的，也知道如何处理不同的用法，但我不清楚如何只滑动到某些元素。这种用法的原因是为了减少滚动动作，这样用户就不需要滚动那么多，并且只提供一些信息来显示。请参阅屏幕截图以供参考和代码片段。谢谢 ！

幻灯片前：

在此处输入图像描述

在 slideToogle 之后：

在此处输入图像描述

.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;
}
<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;">
                                        <input id="r1" type="radio" name="is_account_holder" value="1">
                                        <label class="form-check-label labling" for="r1" style="margin-right: 6.5%;margin-left: 3%;">Account Holder</label><br>
                                        <input id="r2" type="radio" name="is_account_holder" value="0">
                                        <label class="form-check-label labling" style="margin-left: 3%;margin-right: 3%;" for="r2">Not Account Holder</label>
                                    </div>
                                </div><br>
            
                                <div class="form-group row">
                                    <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>
                                                    <option value=""
                                                    @if($service != null && $service->
                                            </select>
                                    </div>
                                </div><br>
    
                                <div class="form-group row">
                                    <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>

标签： javascripthtmljquerycss

解决方案

如果你的内联样式不是由 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>

推荐阅读