jquery silde effect hiding complete page

Я использую эту функцию для динамического загрузки контента в зависимости от элемента, выбранного из раскрывающегося списка. Вот мой код:jquery silde effect hiding complete page

<html> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
<script type="text/javascript"> 
$(function() { 
    $('.group').hide(); 
    $('#div1').show(); 
    $('#stype').change(function() { 
     var val = $(this).val(); 
     if (val) { 
      $('div:not(#div' + val + ')').slideUp(); 
      $('#div' + val).slideDown(); 
     } else { 
      $('div').slideDown(); 
     } 
    }); 
}); 
</script> 
<form action="a.php" method="post"> 

    Select: 
    <select name="stype" id="stype"> 
    <option value="1">op1</option> 
    <option value="2">op2</option> 
    <option value="3">op3</option> 
    <option value="4">op4</option> 
    </select> 
<br><br> 

<div id="div1" class="group"> 
This is div 1. 
</div> 

<div id="div2" class="group"> 
This is div 2. 
</div> 

<div id="div3" class="group"> 
This is div 3. 
</div> 

<div id="div4" class="group"> 
This is div 4. 
</div> 

<input type="submit" name="submit" value=" Submit " /> 
</form> 
</html>

Это работает отлично, когда я запускаю это в простой файл php. Но когда я пытаюсь разместить это на своем веб-сайте и отображаю его как контент там, всякий раз, когда я делаю выбор из раскрывающегося списка, полная страница сайта сместится и скрыта. (header, breadcrumb, footer, sidebar и прочее)

Как исправить эту проблему?

источник

2013-11-13 Anonymous

Это работает для меня http://jsfiddle.net/R2n5x/ – Parixit

Like Я сказал: он работает на простой php-странице, но когда я запускаю (внедряю) его на свой сайт, полный сайт (заголовок, палитра, нижний колонтитул, боковая панель и прочее) скользит вверх и прячется. Ответ ExtPro решил проблему. Спасибо –

, пожалуйста, проверьте мой ответ, только 1 вещь, которую вы должны добавить. – Parixit

Вы пробовали заменить

$('div:not(#div' + val + ')').slideUp();

$('.group').slideUp();

источник

2013-11-13 13:20:19 SW4

Отлично. Теперь я могу ударить себя в голову и сказать «почему я об этом не думал» :) Работает отлично. Большое спасибо. –

попробуйте изменить:

var val = $(this).val(); 
    if (val) { 
     $('div:not(#div' + val + ')').slideUp(); 
     $('#div' + val).slideDown(); 
    } else { 
     $('div').slideDown(); 
    }

для этого:

var val = $('#stype option:selected').val(); 
    if (val != null) { 
     $('div:not(#div' + val + ')').slideUp(); 
     $('#div' + val).slideDown(); 
    } else { 
     $('div').slideDown(); 
    }

источник

2013-11-13 13:24:50

Только одно изменение, и вы идете ....

$('div:not(#div' + val + ')').slideUp();

заменить

$('form div:not(#div' + val + ')').slideUp();

источник

2013-11-13 13:32:35 Parixit

jquery silde effect hiding complete page

ответ

Смежные вопросы