与显示不一致

我制作了一个简单的系统，可以在切换面板中显示信息。我的问题是滑动切换"有时"将面板的显示错误地切换为块，有时切换为正确的css集内联块。

我看到的大多数答案都说，只需在滑动切换后设置显示类型，但这会导致动画中期出现不稳定的外观变化。

$(document).ready(function() {
  // hide all div containers
  $('#collapsible-panels div.yanswer').hide();
  // append click event to the a element
  $('#collapsible-panels a').click(function(e) {
    // find class of clicked object, first class only because it's the one we initially set
    var cN = $(this).attr('class').split(' ')[0];
    // if there is a tab with our corresponding class active, we close it and toggle active off of it.
    if ($(this).nextAll('#collapsible-panels div.' + cN + '.active').length != 0) {
      $(this).nextAll('#collapsible-panels div.' + cN).first().slideToggle();
      $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active');
      $(this).toggleClass('tabbed');
      e.preventDefault();
    }
    //if there is no tab open, find object with the corresponding class and open it and toggle as active.
    else if ($(this).nextAll('#collapsible-panels div.active').length == 0) {
      $(this).nextAll('#collapsible-panels div.' + cN).first().slideToggle();
      $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active');
      $(this).toggleClass('tabbed');
      e.preventDefault();
    }
    //else, basically if a tab is open that is not our chosen tab, find the tab we want to open, close all others, set to inactive then open/activate the selected tab.
    else {
      $(this).nextAll('#collapsible-panels div.' + cN).first().prevAll('#collapsible-panels div.active').slideToggle();
      $(this).nextAll('#collapsible-panels div.' + cN).first().prevAll('#collapsible-panels div.active').toggleClass('active');
      $(this).nextAll('#collapsible-panels div.' + cN).first().nextAll('#collapsible-panels div.active').slideToggle();
      $(this).nextAll('#collapsible-panels div.' + cN).first().nextAll('#collapsible-panels div.active').toggleClass('active');
      $(this).nextAll('#collapsible-panels div.' + cN).first().delay(500).slideToggle();
      $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active');
      $(this).toggleClass('tabbed');
      $(this).nextAll('#collapsible-panels a.tabbed').toggleClass('tabbed');
      $(this).prevAll('#collapsible-panels a.tabbed').toggleClass('tabbed');
      e.preventDefault();
    }
  });
});

.tabs {
  margin: 4%;
  text-align: center;
}
.tabs a {
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  text-decoration: none;
  padding: 15px 25px;
  margin: 0px;
  background: #CE1F24;
  color: #FFF;
  border-radius: 15px;
  border: solid 1px #C00000;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
.tabs a:hover {
  background: #B80000;
  border: solid 1px #880000;
  text-decoration: none;
  border-bottom-width: 0px;
}
.tabs a:focus {
  outline: none;
}
.tabs a.tabbed {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #587CAF;
  border: solid 1px #587CAF;
  border-bottom-width: 0px;
}
.tabs a:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #587CAF;
  border: solid 1px #587CAF;
  border-bottom-width: 0px;
}
.tabs div.yanswer {
  vertical-align: middle;
  display: inline-block;
  padding: 20px 60px;
  margin-top: 5px;
  background: #FFF;
  color: #000;
  border-radius: 40px;
  border: solid 4px #587CAF;
  z-index: 10;
}
.tabs div.yanswer p {
  font-size: 3em;
  width: auto;
}
.tabs div.yanswer ul {
  font-size: 1.3em;
}
.tabs div.yanswer p.smallfont {
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="collapsible-panels" class="tabs">
  <a class="ylead" href="#">Why Should I Lead?</a>
  <a class="yhelp" href="#">Why Should I Help?</a>
  <br>
  <div class="ylead yanswer">
    <p>If you lead a project you can...</p>
    <br>
    <ul>
      <li>Show management what you can do.</li>
      <li>Make decisions.</li>
      <li>Add to your resume.</li>
      <li>*Earn money or time off.*</li>
    </ul>
    <br>
    <p class="smallfont">*eligible for Tasks with 6+ week turnarounds</p>
  </div>
  <div class="yhelp yanswer">
    <p>If you help with a project you can...</p>
    <br>
    <ul>
      <li>Show management what you can do.</li>
      <li>Learn something new.</li>
      <li>Help make decisions.</li>
      <li>Add to your resume.</li>
    </ul>
  </div>
</div>

在chrome中打开开发人员控制台的情况下，显示始终保持为内联块，否则通常显示为块。