Ошибка с переключателем в jQuery

Я пытаюсь создать спойлер на форуме (vbulletin). Это в основном переключение div при нажатии. Все работает нормально, но при размещении переключателя div внутри другого переключателя div анимация просто идет вверх и вниз без остановки. (он открывается и закрывается)

Странно то, что когда я тестирую его на jsfiddle, он работает нормально.

В vbulletin код jquery заменяется на BBcode, подобный этому

[spoiler] Text/Images [/spoiler]

HTML

<div class="head">
    Click to show content
</div>
<div class="body" style="display:none;">   
    Content
    <div class="head">
        Click to show content
    </div>
    <div class="body" style="display:none;">   
        Content
    </div>
</div>

Jquery

$(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
    });
});

Кто-нибудь может придумать решение для этого? Любая помощь высоко ценится

Вот jsfiddle с переключателем div внутри другого переключателя div http://jsfiddle.net/9FP55/


jquery vbulletin
person Sev    schedule 13.05.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

С вашими вложенными .head с .body вам понадобится более сложный селектор:

$("div[id^=post_message] > .head, .body > .head").on("click", function(){
  $(this).next().slideToggle("slow");
});

Конечно, лучшее решение — не создавать этой двусмысленности с самого начала.

Демонстрация: http://jsbin.com/olizux/4/edit

Возможно, это просто опечатка, но в вашем коде нет нужного $:

(document).ready(function(){
  /* Code here */
});

Должно быть

$(document).ready(function(){
  /* Code Here */
});

Или просто

$(function(){
  /* Code Here */
});
person Sampson    schedule 13.05.2012
comment
Тогда вам нужно будет показать фактический HTML, с которым вы имеете дело. Код, который вы разместили, не показывает спойлеры внутри спойлеров. - person Sampson; 13.05.2012
comment
Не знаю почему, но ваш код вообще не работает на форуме. Анимация больше не происходит, я использовал ее так: $(document).ready(function(){ $(body › .head, .body › .head).on(click, function(){ $(this). next().slideToggle(медленно); }); }); - person Sev; 13.05.2012
comment
@Sev Код работает с предоставленной вами разметкой - я разместил тестовые ссылки, чтобы продемонстрировать это. - person Sampson; 13.05.2012
comment
Да, как я уже сказал, это работает на обычной html-странице, но не на форуме. Страницы форума - это php-страницы, кстати, я не знаю, имеет ли это значение - person Sev; 13.05.2012
comment
@Sev Проверьте свой код, в вашем сообщении выше отсутствовало имя функции $. - person Sampson; 13.05.2012
comment
@Sev Это не должно иметь никакого значения, это PHP или нет. Есть ли эти форумы в Интернете, где мы можем их увидеть? - person Sampson; 13.05.2012
comment
Да, я уже исправил ошибку в своем коде, исправлено здесь. И извините, но форум в данный момент недоступен для публики, хотя он онлайн. - person Sev; 13.05.2012
comment
@Sev Код, который вы указали в вопросе, работает с решением, которое я предоставил в своем ответе. К сожалению, без дополнительной информации или доступа к самому форуму мы не сможем помочь в решении этой проблемы. - person Sampson; 13.05.2012
comment
Ваш код добавляется несколько раз. Строки 823 и 856 содержат эту логику, в результате чего анимация повторяется дважды. Вам нужно добавить это в верхнюю часть страницы после того, как вы загрузили jQuery. Кроме того, вы используете мой старый код - избегайте этого, поскольку вы указали, что у вас есть некоторая двусмысленность в ваших элементах. Вместо этого используйте мой новый код. - person Sampson; 13.05.2012
comment
О: / Есть идеи, как это исправить? Потому что BB-код [спойлер] автоматически анализирует код jquery - person Sev; 13.05.2012
comment
@Sev Я обновляю свой код jQuery выше. Кроме того, похоже, вы добавляете это в файл шаблона сообщения, а не в сам шаблон страницы. - person Sampson; 13.05.2012
comment
Когда я использую ваш обновленный код, анимация перестает работать :/ (код также обновляется на форуме, так что вы можете посмотреть) - person Sev; 13.05.2012
comment
Вы используете jquery 1.3.2. Вам необходимо обновиться до последней версии. - person Sampson; 13.05.2012
comment
Посмотрите на строку 10, там есть jquery 1.7.2, версия 1.3.2 взята из плагина, который я установил на форуме. Могут ли 2 разные версии вызвать эту ошибку? - person Sev; 13.05.2012
comment
Строка 27 переопределяет эффекты строки 10. И $, и jQuery сопоставляются с 1.3.2. Если вы хотите использовать оба варианта одновременно, вам нужно использовать $.noConflict(). Ваш плагин не работает с 1.7.2? - person Sampson; 13.05.2012
comment
Он все еще должен работать, я обновил его до 1.7.2 (не удивляйтесь, почему он все еще называется 1.3.2 в коде, это 1.7.2) - person Sev; 13.05.2012
comment
@Sev Нет, ты все еще загружаешь 1.3.2 под $ и jQuery. - person Sampson; 13.05.2012
comment
Да, я думаю, что старая версия все еще кешируется (форум использует canflare), я перезаписал 1.3.2 на 1.7.2 и назвал его 1.3.2, поэтому мне не нужно вносить изменения в сам плагин. - person Sev; 13.05.2012
comment
@Sev Сейчас большое зависание - 1.3.2. Он все еще загружается. Когда это изменится, мой код должен работать для вас, но вам нужно убедиться, что он загружается один раз на странице, а не для каждого сообщения на странице. - person Sampson; 13.05.2012
comment
Хорошо, теперь он обновлен до 1.7.2, теперь ваш код работает, но ошибка все еще появляется :/ - person Sev; 13.05.2012
comment
@Sev Это не ошибка - вы загружаете код несколько раз. Вам нужно загрузить его только один раз. Вам нужно загрузить его перед всеми вашими сообщениями, но после того, как вы сослались на jQuery. - person Sampson; 13.05.2012
comment
Но это именно моя проблема. Код bb [spoiler][spoiler][/spoiler][/spoiler] загружает его 2 раза, потому что спойлер внутри другого спойлера. Я действительно не знаю, как загрузить его только один раз, когда у меня несколько спойлеров :/ - person Sev; 13.05.2012
comment
@Sev Вы не загружаете его с BB-кодами. Вы загружаете его на самой странице .php вверху. BB-коды выиграют от его присутствия, находясь на одной странице, но не загружайте их вместе. - person Sampson; 13.05.2012
comment
Но как мне это сделать, извините, я действительно не понимаю. Это немного сложно, потому что я должен редактировать его через панель управления администратором в предварительно сформированной панели, где я могу указать замену (код jquery) для BBcode (тег спойлера) - person Sev; 13.05.2012
comment
@Sev Игнорируйте bb-коды. Они не имеют значения. Добавьте этот код так же, как если бы вы добавили новый тег ‹script› на свой сайт. Как бы вы добавили Google Analytics? Или у вас есть прямой доступ к файлам .php? - person Sampson; 13.05.2012
comment
давайте продолжим это обсуждение в чате - person Sampson; 13.05.2012

arrow_upward
0
arrow_downward

Попробуйте это

$(document).ready(function(){ 
$('.head').click(function() {
$(this).siblings('.body:first').stop(true,true).toggle('slow'); 
}); 
});
person Mandeep Pasbola    schedule 13.05.2012
comment
при использовании .stop(true,true) анимация появляется и снова закрывается. - person Sev; 13.05.2012
comment
какую версию jquery вы используете - person Mandeep Pasbola; 13.05.2012
comment
попробуйте использовать простой stop() вместо stop(true,true) - person Mandeep Pasbola; 13.05.2012