我是 JavaScript 和 JQuery 的新手，我对以下问题很着迷，我将尝试解释:
我有一个显示两个 Accordion 的页面，这个页面:
好的，正如您在屏幕截图中看到的那样，有 2 个 Accordion 选项卡(第二个已折叠)，其中包含 2 个按钮(左下角)。
这是 HTML 结构:
<!-- FIRST ACCORDION: -->
<div id="ricercaFlussi">
<table class="standard-table-cls table-header-cls">
<thead class="opening active">
<tr>
<th>
<img class="imgAccordion" src="img/arrow_down.gif"/>
Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
</th>
</tr>
</thead>
<tbody class="expanded">
<tr>
<td style="width: 100em;">
<table class="standard-table-cls" style="margin-left: 0 !important; margin-right: 0 !important;">
<tbody>
<tr>
<td width="30%">Numero di giorni dalla pubblicazione</td>
<td colspan="3">
<input type="text" maxlength="3" size="5" name="giorni">
</td>
</tr>
......................................................
......................................................
......................................................
</tbody>
</table>
<div class="bottoneDiv">
<input class="bottone" type="text" readonly
value="Conferma" onclick="Javascript: loadingPopUp(); return ricercaFlusso();"
onMouseOver="'Conferma';return true"/>
<input class="bottone" type="text" readonly
value="Cancella" onclick="Javascript: loadingPopUp(); pulisciFormRicercaFlusso()"
onMouseOver="'Cancella';return true"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- SECOND ACCORDION: -->
<div id="ricercaFatture">
<table class="standard-table-cls table-header-cls">
<thead class="opening">
<tr>
<th>
<img class="imgAccordion" src="img/arrow.gif"/>
Ricerca Fatture
</th>
</tr>
</thead>
<tbody class="expanded" style="display: none;">
<tr>
<td style="width: 100em;">
<!--<div id="ricercaFlussiHeader" class="accordion-pane-header" onclick="Javascript: visualizzaPannelli(true, false);">Ricerca Flussi</div>-->
<div id="ricercaFattureContent" class="accordion-pane-content" style="">
<table class="standard-table-cls" style="margin-left: 0; margin-right: 0;">
<tbody>
<tr>
<td width="30%">
<input type="hidden" name="pkCodaSelezionata" value="<%=pkCoda%>" readonly>
Numero Fattura
</td>
<td>
<input type="text" maxlength="12" size="14" name="numeroFattura"
value="<%=numeroFattura%>">
</td>
</tr>
.....................................................
.....................................................
.....................................................
</tbody>
</table>
<div class="bottoneDiv">
<input class="bottone" type="text" readonly
value="Conferma" onclick='Javascript: loadingPopUp(); return ricercaFattura(null)'
onMouseOver="'Conferma';return true"/>
<input class="bottone" type="text" readonly
value="Cancella" onclick="Javascript: loadingPopUp(); pulisciFormRicercaFattura()"
onMouseOver="'Cancella';return true"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
还有这个 JQuery 脚本用于打开和关闭以前的 Accordion 选项卡:
$(document).ready(function () {
$("thead.opening").click(function () {
var tbodyElement = $(this).next();
$(this).next().slideToggle('slow', function () {
$(this).prev("thead.opening").toggleClass("active");
$("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
$("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
});
//$(this).next().css('display', 'none');
return false;
});
});
所以这个 JQuery 脚本所做的是:当用户点击 thead 时它折叠或打开它的 tbody 调用 slideToggle()简单地通过滑动显示或隐藏匹配元素的 JQuery 函数。
它工作正常(与单击的选项卡相关的 tbody 正确打开和隐藏)但问题是如果我关闭选项卡然后再次打开它(或者如果我第一次打开选项卡，碰巧对于标题为 Ricerca Fatture 的第二个选项卡)，按钮向左移动，这是我获得的 wath 的屏幕截图:
在这种情况下，我关闭并打开了两个选项卡，因此如果您将此屏幕截图与上一个屏幕截图进行比较，您会发现按钮向左移动了。
我尝试用 FireBug 分析 DOM 时发现了这一点。
在关闭和打开标签之前，我有一个包含以下内容的 tbody:
<tbody class="expanded">
当我点击一个打开的标签时(点击thead)我得到**tbody是:
<tbody class="expanded" style="display: none;">
因此 tbody 被正确隐藏了。
但是如果现在我点击一个隐藏的 tbody 的 thead 这个 tbody 被改变了(通过之前的 slideToggle() 函数)进入:
并且我发现 tbody 中的所有 td 宽度较小，因此按钮不在左下角(tbody 的所有内容都是“压缩”)，这是 FireBug 屏幕截图，您可以在其中看到发生了什么:
如您所见，tbody 内容的宽度较小。
我不明白为什么!!!似乎它可能取决于设置的 style="display: block;" 因为如果在 FireBug 中我尝试在
中更改此值style="display: auto;"
它返回正确显示!!!
所以我尝试将这个 JQuery 函数添加到之前的函数中:
$(document).ready(function () {
$("thead.opening").click(function () {
var tbodyElement = $(this).next();
$(this).next().slideToggle('slow', function () {
$(this).prev("thead.opening").toggleClass("active");
$("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
$("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
});
//$(this).next().css('display', 'none');
return false;
});
$("thead.opening").click(function () {
alert("INTO second function");
$(this).next().css('width', '10000000 em');
alert(modified);
$(this).next().css('width', '10000000 em');
$(this).next().css('display', 'auto');
alert($(this).next().css('display'));
});
});
我的想法是，之后 slideToggle() 打开一个选项卡(并在我的 tbodystyle="display: block;" strong>) 我采用相同的 tbody 并设置 style="display: auto;"
但它无法工作，因为在那之后我打开了一个选项卡，它仍然存在:
style="display: block;"
而不是:
style="display: auto;"
如我所料。奇怪的是，如果在前面的脚本中我尝试设置 display: none 值而不是 display:auto，通过:
$(this).next().css('display', 'none');
它在我 expext 时工作并且 tbody 总是隐藏的。
那么，可能是什么问题呢？我错过了什么？我该如何解决这个问题并防止重新打开的 tbody 上的 style="display: block;" 导致其内容具有压缩宽度？我快要疯了试图找到解决方案
谢谢
最佳答案
因此仅通过设置 CSS 就有点困难。您需要做的是通过在 css 中提供 'display : auto !important' 并为其提供一个类来覆盖 jQuery 样式。现在在切换时使用此类，这意味着当您调用滑动切换关闭然后删除此类时，如果滑动切换正在作为显示 block 写入，则添加此类，以便 !important 具有更高的优先级。
关于javascript - 为什么之后调用 JQuery slideToggle() 函数 tbody 显示 :block setted and its width appear compressed?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30027172/