Конфликт между некоторыми JavaScript и jQuery на одной странице

Question

Я использую функцию JavaScript и некоторые jQuery для выполнения двух действий на странице. Первая - это простая функция JS, позволяющая скрывать / показывать элементы div и изменять активное состояние вкладки:

Это JS, который показывает / скрывает div и изменяет активное состояние на некоторых вкладках:

var ids=new Array('section1','section2','section3');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

HTML:

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>

<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>

Теперь проблема ....

Я добавил галерею изображений jQuery под названием galleria на одну из вкладок. Галерея прекрасно работает, когда она находится в div, который изначально установлен для отображения: блок. Однако, когда он находится в одном из элементов div, для которого установлено отображение: none; часть галереи не работает, когда div переключается, чтобы быть видимым. В частности, перестает быть записан следующий css (созданный galleria jQuery):

element.style  {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}

Насколько я могу судить, я не могу понять, почему происходит сбой галереи, когда для нее установлено отображение div: нет. Так как это объявление перезаписывается при нажатии на вкладку (с помощью функций Javascript выше), почему это может вызвать проблемы? Как я уже упоминал, он отлично работает, когда живет в display: block; отд.

Есть идеи? Я не ожидаю, что кто-нибудь будет знаком с галереей изображений jQuery galleria ... но, возможно, идея о том, как можно решить эту проблему?

Спасибо!

Answer 1

Если вы включаете jQuery, вы можете сократить свой JavaScript до этого:

$(function() {

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

Я бы также удалил встроенные стили, которые устанавливают display:none. Затем вы можете в своем javascript вы можете инициализировать Galleria, а затем скрыть свои разделы.

Что-то вроде:

$(function() {

$('#section2, #section3').hide();
$('#section2 .images').galleria();

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

Я бы даже пошел дальше и изменил ваш html на что-то вроде этого:

<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>

<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>

Тогда ваш javascript может быть просто:

$(function() {

$('#section2 .images').galleria();
$('#section2, #section3').hide();

var sections = $('.section');
$('.sectionlinks a').click(function(e){
    e.preventDefault();
    sections.hide();
    $($(this).attr('href')).show();
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');
});

});

Рабочий пример: http://jsfiddle.net/cdaRu/2/

Answer 2

Это просто «не в манере», но, возможно, блочная модель неполна: «Элемент вообще не будет генерировать коробки» с display: none;

Возможно, поменять это обратно на "блок" и установить visibility: hidden; будет лучше?

Answer 3

Моей первой рекомендацией будет переписать исходную функцию Javascript для использования jQuery. Он уже имеет встроенные функции переключения видимости ... использование той же системы минимизирует конфликты и способствует более плавному коду.

Answer 4

По умолчанию установите для них значение «блокировать», инициализируйте галерею изображений галереи, а затем скройте элементы, которые вы хотите скрыть, и посмотрите, исправит ли это. Или попробуйте заново инициализировать галерею после каждого switchid.