幻灯片与显示不一致

Question

我做了一个简单的系统，可以在切换的面板中显示信息。 我的问题是slidetoggle“有时”会错误地将面板的显示切换为块，有时会错误地切换为正确的css inline-block。

我见过的大多数答案都只是在滑动切换后才设置显示类型，但这会导致动画中间出现断断续续的外观变化。

 $(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

我找到了自己问题的答案。 有了适当的hack修复程序（即在切换后将显示设置为inline-block），我注意到它只需要应用一次，然后slideToggle（）可以正确地在display：none和display：inline-block之间进行。

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