2013-04-17 3 views
0

나는 Wordpress 사이트를 가지고 있으며 모바일 버전의 경우 상단에 메뉴가 있으며 카테고리가있는 드롭 다운 목록이 있습니다. 검색 바를 추가하고 싶습니다.드롭 다운 목록의 검색 창

하단에 검색 막대가 포함 된 작업 드롭 다운 목록이 있지만 검색 막대를 클릭하면 목록이 다시 올라갑니다. 가능한 최선의 방법이 무엇인지 궁금 해서요, 아니면 가능한 방법이 있습니까?

일부 자바 스크립트를 사용하도록 설정했습니다. 터치 모바일 장치를 클릭하면 슬라이드가 전환됩니다. 이 터치 장치에서 전환하는

HTML

<div id="nav-responsive"> 
    <div class="categories-responsive fssinclair_bold"> 
    <ul id="nav"> 
     <li><h3 class="fssinclair_bold"></h3> 
     <ul> 
      <?php wp_list_categories('&title_li=') ?> 
     </ul> 
     <div class="search-responsive"> 
      <form method="get" id="searchform" action="<?php echo home_url('/'); ?>"> 
      <div id="search-inputs"> 
       <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" /> 
       <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>"> 
      </div> 
      </form> 
     </div> 
     </li>  
    </ul> 
    </div> 
</div> 

자바 스크립트 :

$(document).ready(function() { 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    $('.categories-responsive').click(function(){ 
    $(this).find('ul#nav').find('ul').slideToggle(); 
}); 

답변

0

작업 솔루션은 이러한 요소에 별도의 기능을 만들거나 인 stopPropagation을 사용하는 모든 관련 코드는 아래에 제공 그래서 자식 요소는 클릭 이벤트에서 해고 당하지 않습니다. 이런 식으로 뭔가 :이 작동 얻을 수 있습니다 어떤 경우 (검색 필드

onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();" 

또는이

$("#searchform").click(function(event){ event.stopPropagation(); }); 
+0

나는이 좋은 읽기 했어 난 확실하지 오전 또는 내가하지 않을 수 있습니다 내가 jQuery에서 초보자임을 이해함). 메뉴의 상단 막대를 클릭하고 드롭 다운을 클릭하고 다시 클릭하고 slideToggle의 1 줄 대신 위로 이동하는 방법이 있습니까? 그게 말이된다면! 검색 표시 줄은 slideDown을 사용하면 다시 슬라이드를 다시 클릭한다고 말하는 다른 기능이 필요할 때 그대로 있습니다. 미안 내가 아무 의미도 없다면 나는 늪지 표준 jQuery를 사용한다! – user2212564

+0

죄송합니다. 귀하가 올바르게 물어 본 내용을 이해하지 못했을 수 있습니다. 원하는 옵션을 표시하는 버튼을 클릭하고 다시 클릭하면 해당 옵션을 숨기도록 드롭 다운을 원하십니까? –

+0

그게 굉장히 중요하지만 그 목록 안에있는 주요 개념은 검색 상자입니다. 그래서 그 순간에 목록이 다시 올라갑니다 (죽은 성가신!) 그것은 내 JS에서해야 할 일이 될 것입니다. 상위 메뉴 막대를 클릭하면 중첩 된 다른 요소가 아닌 토글됩니다. 답장을 보내 주셔서 감사합니다! – user2212564