Question

我制作了一个简单的系统，允许我在切换面板中显示信息。我的问题是slidetoggle'有时'错误地将面板的显示切换为块，有时作为正确的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中打开，则显示始终保持为内联块，如果不是，它通常显示为块。

Answer 1

我找到了自己问题的答案。随着黑客修复到位，在切换后将显示设置为内联块，我注意到它只需要应用一次，之后slideToggle（）将正确显示在display：none和display：inline-block之间。

我认为问题是我的.hide（）在css将它们设置为内联块之前将我的面板显示设置为none，因此slideToggle（）不知道要使用什么默认显示，而是恢复为块。我通过添加$（'＃collapsible-panels div.yanswer'）来解决这个问题.css（'display'，'inline-block'）;在我的.hide（）之前。这确保了slideToggle（）知道它们应该是内联块。

Slidetoggle与显示不一致

1 个答案: