jQueryパネル - 奇妙なコンテンツの効果

Question

私が構築しているウェブサイトに非常に奇妙なjQueryエフェクトが発生しています。このページ

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

、左側のパネルで、あなたは4つのオレンジのリンクが表示されます。クリックすると、コンテンツパネルがスライドして開きます。その後、別のオレンジ色のリンクをクリックすると、最初のパネルが閉じてスライドし、2番目のパネルがスライドして開きます。

ただし、スライドが閉じたときにその中のコンテンツが変更される奇妙なエフェクトがあります。

$("#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の例である：ここで

はその権力これらのスライドのjQueryコードの一例である

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

誰が、なぜ奇妙なコンテンツswitcharoundバグを知っていますスライドが閉じて、それを修正するときに発生していますか？具体

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

：

Answer 1

問題が線である

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

すなわちラインが（Kinectのものであろう）、それは発見した.togglepanelの最初の要素を非表示とすることを隠し。あなただけのクラス、目に見える.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); }