jQuery面板-怪异的内容效果

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

在该页面的左侧面板中，您将看到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>

微软Kinect
此处文本

大屏幕沉浸式
此处文本

手机和平板电脑
此处文本

游戏控制器和遥控器
此处文本

---

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

问题在于：

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

具体而言：

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

该行隐藏它在.togglepanel中找到的第一个元素（即Kinect元素），并隐藏该元素。您需要找到visible.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); }

---

您提供的代码第2行似乎有语法错误。你知道怎么修吗？有一个不见了。在eachOkay之前，代码现在起作用，然而，以前，幻灯片是使用“幻灯片”效果平滑地打开和关闭的，现在在某些情况下，它们只是出现或消失。你可以查看我在上面的原始帖子中链接的页面，看看这个例子。为什么代码破坏了幻灯片效果？可能是几个不同的问题造成的（甚至可能是这些问题的组合）：1）检查VisibleManelnone'，在hide（）中添加一个回调函数，该函数启动滑出，在隐藏完成后，如果为false，则只需立即执行滑出。2） .toggle的方向是“左”，不是应该是“右”吗？3） 虽然在任何情况下都可以将stop（）函数添加到鼠标驱动的动画中，但您很可能需要将其添加到动画中来处理此问题。