Конфликт JQuery с двумя скриптами щелчка на сайте WordPress

Я уже проверил некоторые ссылки на Stackru, но, похоже, ничего не помогло в моей проблеме. У меня есть небольшой сайт с аккордеонной навигацией JQuery в середине страницы.

То, что должно произойти, это когда я нажимаю на одну из основных ссылок, аккордеон должен скользить вниз и раскрывать дочерние ссылки. Нажав на это, можно было бы скользить вниз по div под названием #panel, и это должно привести к динамическому контенту. Содержимое загружается, но панель не скользит вниз. Если я удаляю Javascript для динамического контента, анимация панели работает.

Очевидно, что здесь есть конфликт, но я не уверен, что это может быть, чтобы вылечить его. Уже пробовал добавить evt.preventDefault(); на мои функции щелчка, но безрезультатно. Вот код для открытия и закрытия панелей, который я мог бы добавить, это второй экземпляр скрипта, который я пытался выполнить:

//Opening and closing the top bar


    var topBarHeight = jQuery('#page-con').height();
    var topBarMargin = -topBarHeight - 1;
    var topBarOpen = false;

    function topBarContentSizeCheck(){
        topBarHeight = jQuery('#page-con').height();

        if(topBarOpen==false){
            jQuery('#panel').css({
                height: 0
            }); 
        }
        else{
            jQuery('#panel').css({
                height: topBarHeight
            }); 
        }
    }

    jQuery('#panel').css({
        height: 0
    }); 

    jQuery('#nav-main ul ul li a').click(function(evt){
        var href = jQuery(this).attr('href');           
        if(href=="#panel"){     
            if(topBarOpen==false){
            topBarOpen = true;

            jQuery('#panel').animate({
                height: topBarHeight,
                useTranslate3d: true
            }); 
            }

            else{

            topBarOpen = false;

            jQuery('#panel').animate({
                height: 0,
                useTranslate3d: true
            }); 

            jQuery('html,body').animate({
                scrollTop: 0,
                useTranslate3d: true
            }, 400);    
            }
            return false;
        }
    });

    jQuery('#closelink').click(function(evt){
        evt.preventDefault();

        topBarOpen = false;

            jQuery('#panel').animate({
                height: 0
            }); 

            jQuery('html,body').animate({
                scrollTop: 0
            }, 400);



            return false;

    });
 </script>

А затем код для загрузки динамического контента (намного меньше):

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery('#nav-main ul li a').click(function(){
    var post_url = $(this).attr("href");
    var post_id = $(this).attr("rel");

    jQuery("#page-con").html("loading...");

jQuery("#page-con").load(post_url);
window.location.hash = post_id;
return false;
});
});
</script>

Любые идеи о том, как заставить эти два сценария играть хорошо?

* ОБНОВИТЬ *

Поэтому я решил объединить две функции щелчка в одну. Это сработало, но не полностью. Панель теперь закрывается, но текст не загружается в div #page-con. Там нет ничего в консоли, говорящей это. Он даже перечисляет, что он делает правильный вызов на сервер. Вот новый код.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery(".btn-slide").click(function(){
    var post_id = jQuery(this).attr("rel")
    jQuery("#page-con").html("loading...");
    jQuery("#page-con").load("http://upsilon.lunariffic.com/~swstr0/swsg-ajax/",{id:post_id});
    jQuery("#panel").slideToggle("slow");
    jQuery(this).toggleClass("active");
    return false;
});
});
</script>
Источник

2 ответа

Решение

ОК, у меня есть ответ. Это в Codepen по адресу http://codepen.io/anon/pen/dsloA Так я и сослался на ссылку. Мне нужно было сделать

jQuery("li.btn-slide a").click(function(){

вместо

jQuery(".btn-slide").click(function(){

Итак, функция:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery("li.btn-slide a").click(function(){
    jQuery("#panel").slideToggle("slow");
    jQuery(this).toggleClass("active");
    var post_url = jQuery(this).attr("href");
    var post_id = jQuery(this).attr("rel");
    jQuery("#page-con").html("loading...");
    jQuery("#page-con").load(post_url);
    window.location.hash = post_id;
    return false;
});
});
</script>

Единственная проблема сейчас - по какой-то причине, это не касается моего звонка в моем шаблоне page.php. Так что я получаю только титул.

Источник

Вы хотели добавить событие "загрузить контент" во ВСЕ ссылки?

Селектор, который вы использовали jQuery('#nav-main ul li a') нацелится на всех <a> теги в меню, а не только на верхнем уровне. Чтобы нацелить ссылки более конкретно, вы можете сделать это во втором сценарии:

jQuery('#nav-main > ul > li > a')

Таким образом, вы не добавляете событие динамического контента ко всем ссылкам, а только к тем, которые вы хотите настроить таргетингом. Проверьте этот Codepen, если вы хотите поиграть с ним.

Источник
Другие вопросы по тегам