使用 slideToggle 隐藏/显示高级选项，子元素可见

Question

问题

我创建了一个点击功能来显示和隐藏高级搜索选项。

• 当我单击Click to show advanced options 按钮时，当 div 向上滑动时，选择字段可见，但外部容器已设置为固定高度，因此这种过渡看起来非常突然。
• 寻找更好的方法来设置两个高度，所以我不需要 依靠固定数字，height: 100% 似乎不起作用

JSFiddle：https://jsfiddle.net/69jg5a4d/

scripts.js

  $(".feature__text--search").on("click", function(){
    $(".advanced__wrapper").toggleClass("is-open");

    if ($(".advanced__wrapper").hasClass("is-open")) {
      $(".header__search.search--home").css({"height": "384px", "max-height": "none"});
      $(".advanced__wrapper").slideToggle();
    } else {
      $(".advanced__wrapper").slideToggle();
      $(".header__search.search--home").css({"height": "110px", "max-height": "110px"});
    }

index.html

<div class="header__search search--home">

            <div class="header__search--simple">
                <i class="fa fa-search fa-search-home" aria-hidden="true"></i>
                <input type="text" name="" placeholder="Enter a school name" class="input--address">

                <button class="btn btn--submit">Submit</button>
            </div>

            <div class="feature__teaser--search">
                <p class="feature__text--search">Click to <span>show</span> advanced options</p>

                <div class="advanced__wrapper advanced__wrapper--home">
                            <!-- <p class="advanced__text">Advanced options</p> -->
                            <div class="advanced advanced--home">
                                <div class="advanced__third">
                                    <select class="select--type type--results">
                                        <option>All schools types</option>
                                        <option>Elementary School</option>
                                        <option>Middle School</option>
                                        <option>High School</option>
                                        <option>Technical School</option>
                                        <option>Alternative School</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__third">
                                    <select class="select--counties counties--results">
                                        <option>All counties</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__third">
                                    <select class="select--distance distance--results">
                                        <option>Short drive ( < 5 miles)</option>
                                        <option>Walking distance ( < 1 mile )</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__address">
                                    <input type="text" name="" placeholder="Enter an address or ZIP code" class="input--address--extra">
                                </div>

                                <div class="checkbox__group">
                                    <div class="checkbox__inner">
                                        <input type="checkbox" name="">
                                        <label class="label--checkbox">Show schools in the St. Louis metro area</label>
                                    </div>
                                </div>
                            </div> <!-- .advanced -->
                        </div> <!-- .advanced__wrapper -->
            </div>

            <div class="header__search--advanced">
                <input type="text" name="" placeholder="Enter your address" class="input--address">

                <div class="checkbox__group">
                    <i class="fa fa-times" aria-hidden="true"></i>
                    <input type="checkbox" name="">
                    <label class="label--checkbox">Show schools in the St. Louis metro area</label>
                </div>

                <select class="select--type type--home">
                    <option>All school types</option>
                    <option>Elementary School</option>
                    <option>Middle School</option>
                    <option>High School</option>
                    <option>Technical School</option>
                    <option>Alternative School</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>

                <select class="select--counties">
                    <option>All counties</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>

                <select class="select--distance">
                    <option>Short drive ( < 5 miles)</option>
                    <option>Walking distance ( < 1 mile )</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
            </div>
        </div>

Answer 1

我已经修改了你的小提琴，如果这是你要找的，请告诉我：https://jsfiddle.net/69jg5a4d/4/

对 CSS 的更改

.search--home {
  overflow: auto;
  max-height: 100vh;
}

/* modified .feature__teaser--search */
.feature__teaser--search {
   /* removed height */
}

/* modified the height of .header__search */
.header__search {
   /* removed max-height */
   height: auto;
}

改成JS

// commented these 2 lines
//      $(".header__search.search--home").css({"height": "40vh", "max-height": "100vh"});

//      $(".header__search.search--home").css({"height": "12vh", "max-height": "100vh"});

Answer 2

为什么不在调用 slideToggle() 之前设置高度？