Question

问题

我的问题是我尝试slideToggle()点击<div class='inputs'></div>下的<h2></h2>。另一件事是我没有收到任何错误。

＆＃13;

    // MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).find('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

＆＃13;

Answer 1

问题在于我必须使用next()而不是find()。

＆＃13;

    // MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).next('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

＆＃13;

Answer 2

问题是.find()正在查看h2的子元素，在这种情况下，它只是<i>元素，因此它无法找到它的内容寻找。而是首先获取父级，以便在<div class="inputs">中搜索。

＆＃13;

// MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).parent().find('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

＆＃13;

Answer 3

首先，每个部分需要不同的选择器。等;

<h2 id="toggle-inputs-students">Add Student

和

<div id="inputs-students">

说到JS部分，你可以使用下面的代码

$( "#toggle-inputs-students" ).click(function() {
  $( "#inputs-students" ).slideToggle( "slow", function() {
// Animation complete.
  });
});

不能在h2下的SlideToggle（）类

3 个答案: