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

Question

您好，我需要使用 slideToggle jQuery function。 基本上我知道 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>

Answer 1

如果您的内联 styles 不是由 jQuery 创建的，则应将所有 CSS 语句写入 Z2C56C3620580420DDFBED293 文件中。

此外，您不应该使用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>