jQuery Panels - странный контент-эффект - PullRequest
Новая
       32

jQuery Panels - странный контент-эффект

1 голос
/ 21 июля 2011

Я получаю очень странный эффект 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>

Кто-нибудьзнаете, почему происходит странная ошибка переключения контента при закрытии слайда и как ее исправить?

1 Ответ

0 голосов
/ 21 июля 2011

Проблема в строке: 

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

, в частности: 

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

Эта строка скрывает первый найденный элемент в .togglepanel (который будет Kinect)и скрывает это.Вам нужно найти идентификатор видимой .togglepanel и скрыть этот идентификатор, а не просто класс: 

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); }
...