jQuery Panels - 奇怪的内容效果

Question

我正在构建的网站上得到一个非常奇怪的 jQuery 效果。

http://www.real-visual.com/site/Technology/

在此页面的左侧面板中，您将看到 4 个橙色链接。如果单击一个，它会滑动打开一个内容面板。然后，如果您单击不同的橙色链接，它会滑动关闭第一个面板并滑动打开第二个面板。

但是，您会注意到一种奇怪的效果，当幻灯片滑动关闭时，其中的内容会发生变化。

以下是支持这些幻灯片的 jQuery 代码示例：

$("#panel-2-button").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000); 
});
$("#panel-2-button-medium").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000);
});
$("#panel-2-button-large").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);

});

这是一个 HTML 示例：

<div id="content-inner-panel-2-medium" class="togglepanel">
    <h1>Microsoft Kinect</h1>
    <p>Text Here</p>
    <div id="panel-2-close-medium"></div>
</div>

 <div id="content-inner-panel-3-medium" class="togglepanel">
    <h1>Large Screen & Immersive</h1>
    <p>Text Here</p>
    <div id="panel-3-close-medium"></div>
 </div>

  <div id="content-inner-panel-4-medium" class="togglepanel">
    <h1>Mobile Phones & Tablets</h1>
    <p>Text Here</p>
    <div id="panel-4-close-medium"></div>
  </div>

  <div id="content-inner-panel-5-medium" class="togglepanel">
    <h1>Games Controllers & Remotes</h1>
    <p>Text Here</p>
    <div id="panel-5-close-medium"></div>
  </div>

有谁知道为什么幻灯片关闭时会出现奇怪的内容切换错误以及如何修复它？

Answer 1

问题出在这行：

if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }

具体来说：

$(".togglepanel").hide("slide", { direction: "left" }, 1000);

该行隐藏了它找到的 .togglepanel 中的第一个元素（这将是 Kinect 元素）并将其隐藏。您需要找到可见 .togglepanel 的 id 并隐藏该 id，而不仅仅是类：

var visiblepanel = 'none';
$('.togglepanel').each(function(){
    if ($(this).is(':visible')) {
        visiblepanel = $(this).attr('id');
    }
});
if (visiblepanel != 'none'){ $(visiblepanel).hide("slide", { direction: "left" }, 1000); }

最后一行可能需要像这样添加 # 符号：

if (visiblepanel != 'none'){ $('#' + visiblepanel).hide("slide", { direction: "left" }, 1000); }