WordPress 사이트의 두 클릭 스크립트와의 JQuery 충돌

Question

StackOverflow에서 이미 일부 링크를 체크 아웃했지만 아무 것도 내 문제를 해결하는 데 도움이되지 않습니다. I have a small site here에는 페이지 중간에 JQuery 아코디언 탐색 기능이 있습니다.

메인 링크 중 하나를 클릭하면 아코디언이 아래로 내려 가서 자식 링크를 나타냅니다. 그런 다음 #panel이라는 div를 아래로 내리면 동적 내용이 나타납니다. 내용이로드되지만 패널이 아래로 내려 가지 않습니다. 동적 콘텐츠에 대한 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> 

두 개의 스크립트를 멋지게 만드는 방법에 대한 아이디어가 있으십니까?

는 * UPDATE *

그래서 나는 하나로 두 개의 클릭 기능을 결합하기로 결정했다. 일종의 일이지만 완전히는 아닙니다. 이제 패널이 내려 왔지만 텍스트가 # page-cont div에로드되지 않습니다. 이것을 말하는 콘솔에는 아무것도 없습니다. 심지어 서버에 대한 적절한 호출을하는 목록입니다. 여기에 새로운 코드가 있습니다.

<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> 

Answer 1

좋아, 대답이 있습니다. 그것은 코델에서 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 내 전화를 존중하는 것입니다

만 문제 주형. 그래서 나는 제목 만 얻는다.

Answer 2

'링크 콘텐츠'이벤트를 모든 링크에 추가 했습니까?

jQuery('#nav-main ul li a')을 사용한 셀렉터는 최상위 레벨의 태그가 아닌 메뉴의 모든 <a> 태그를 타겟팅합니다. 더 구체적으로 링크를 대상으로 지정하려면, 당신은 두 번째 스크립트에서이 작업을 수행 할 수 있습니다 : 당신은 모든 링크 대상으로 할 경우에만 최상위들에 동적 콘텐츠 이벤트를 추가하지

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

그런 식으로. 주변에서 놀고 싶다면 this Codepen을 확인하십시오.