slideToggle 函数在下拉列表的开头留下一些 space

Question

我有一个 Pen，我在其中使用了 jQuery slideToggle() 函数。但是，在运行代码上，似乎有一些 space 留在顶部，然后幻灯片效果开始。可能的原因是什么？

$(() => {
  let hidden = true,
    eff = 'slide',
    effFunc;

  let display = () => {
    $('.menu-list').toggle();
  }
  let fader = () => {
    $('.menu-list').animate({
      opacity: 'toggle'
    }, 1000);
  }

  //////////////////////////////////// 
  // Here is the function that makes the slide effect

  let slider = () => {
    $('.menu-list').slideToggle(1000);
  }

  ////////////////////////////////////

  $('input[name="effect"]').on('click', function() {
    if (!hidden) {
      effFunc();
      hidden = !hidden;
    }
    eff = $(this).val();
  });

  $('.menu-head').on('click', function() {
    if (eff == 'disp') {
      effFunc = display;
    } else if (eff == 'fade') {
      effFunc = fader;
    } else if (eff == 'slide') {
      effFunc = slider;
    }

    effFunc();
    hidden = !hidden;
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
  margin: 0;
  padding: 10px;
  cursor: default;
  user-select: none;
}

span {
  display: inline-block;
  box-sizing: border-box;
}

span.menu-head {
  padding: 9px 0;
  background: #FF872A;
  width: 270px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 2px #5A5A5A;
  font: 500 16pt Roboto;
}

span.menu-list {
  border-radius: 0 0 6px 6px;
  border: 0.1px solid #D7D7D7;
  background: #D7D7D7;
  width: 270px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: none;
}

span.menu-item {
  width: 270px;
  padding: 12px 27px;
  color: #2A7AFF;
  background: #EAEAEA;
  font: 700 16pt Muli;
  transition: all 0.7s;
}

span.menu-item:hover {
  background: #2A9A3F;
  color: #FAFAFA;
}

label.option-label {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #9A9A9A;
  color: #fff;
  width: 25vw;
  max-height: 33vh;
  padding: 20px 12px;
  border-radius: 4px;
  box-shadow: -4px 4px 1px #C7C7C7;
}

label.option-label * {
  margin: 10px 7px;
  font: 600 16pt Tajawal;
}

input[type='radio'] {
  transform: scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>

<span class='menu-list'>
      <span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>

<label class='option-label'>
      <label>
        <input type='radio' name='effect' value='disp'/>&nbsp;Show / Hide
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='fade'/>&nbsp;Fade In / Fade Out
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='slide' checked/>&nbsp;Slide Up / Slide Down
      </label>
</label>

Answer 1

是因为.menu-list的inline-block，将display : block添加到.menu-list，隐藏在js开头，所以会切换回display : block 而不是 display : inline-blick

$(() => {
  let hidden = true,
    eff = 'slide',
    effFunc;
  $('.menu-list').hide();
  let display = () => {
    $('.menu-list').toggle();
  }
  let fader = () => {
    $('.menu-list').animate({
      opacity: 'toggle'
    }, 1000);
  }

  //////////////////////////////////// 
  // Here is the function that makes the slide effect

  let slider = () => {
    $('.menu-list').slideToggle(1000);
  }

  ////////////////////////////////////

  $('input[name="effect"]').on('click', function() {
    if (!hidden) {
      effFunc();
      hidden = !hidden;
    }
    eff = $(this).val();
  });

  $('.menu-head').on('click', function() {
    if (eff == 'disp') {
      effFunc = display;
    } else if (eff == 'fade') {
      effFunc = fader;
    } else if (eff == 'slide') {
      effFunc = slider;
    }

    effFunc();
    hidden = !hidden;
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
  margin: 0;
  padding: 10px;
  cursor: default;
  user-select: none;
}

span {
  display: inline-block;
  box-sizing: border-box;
}

span.menu-head {
  padding: 9px 0;
  background: #FF872A;
  width: 270px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 2px #5A5A5A;
  font: 500 16pt Roboto;
}

span.menu-list {
  border-radius: 0 0 6px 6px;
  border: 0.1px solid #D7D7D7;
  background: #D7D7D7;
  width: 270px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: block;
}

span.menu-item {
  width: 270px;
  padding: 12px 27px;
  color: #2A7AFF;
  background: #EAEAEA;
  font: 700 16pt Muli;
  transition: all 0.7s;
}

span.menu-item:hover {
  background: #2A9A3F;
  color: #FAFAFA;
}

label.option-label {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #9A9A9A;
  color: #fff;
  width: 25vw;
  max-height: 33vh;
  padding: 20px 12px;
  border-radius: 4px;
  box-shadow: -4px 4px 1px #C7C7C7;
}

label.option-label * {
  margin: 10px 7px;
  font: 600 16pt Tajawal;
}

input[type='radio'] {
  transform: scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class='menu-head'>Social Networks</span><br/>

<span class='menu-list'>
      <span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>

<label class='option-label'>
      <label>
        <input type='radio' name='effect' value='disp'/>&nbsp;Show / Hide
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='fade'/>&nbsp;Fade In / Fade Out
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='slide' checked/>&nbsp;Slide Up / Slide Down
      </label>
</label>

slideToggle 函数在下拉列表的开头留下一些 space

slideToggle function leaves some space at the beginning of dropdown list

html

javascript

css

jquery

slidetoggle