2013-06-19 3 views
0

드롭 다운의 트위터 부트 스트랩 문서보기 드롭 다운 토글에 대해 URL을 그대로 유지할 수 있다고 말한 것을 보았습니다. 나는이 일을 성취하려고 노력했지만 그 일에 어떤 행운은 없었습니다. 대신에 진행중인 경로 대신 드롭 다운 메뉴를 토글합니다. 내가 뭘 놓치고 있니? 다음은 내 코드 예제입니다.트위터 부트 스트랩 드롭 다운 토글 및 URL?

<li class="dropdown"> 
    <a class="dropdown-toggle" id="dPublisher" data-toggle="dropdown" role="button" data-target="#" href="publisher.php">PUBLISHER<b class="caret"></b></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledbyid="dPublisher"> 
     <li><a href="eeditions.php">E-Editions</a></li> 
    <li><a href="digitalarchive.php">Digital Archive</a></li> 
    </ul> 
</li> 
<li><a href="blog.php">BLOG</a></li> 

이 예제에서는 BLOG가 링크 일 때 PUBLISHER가 드롭 다운 트리거 및 링크로 간주됩니다. 드롭 다운 메뉴가 작동하고 작업 내의 모든 링크가 있지만 문서에 나와있는 것처럼 URL을 그대로 유지할 수는 없습니다. 설명서를 이해하지 못했습니까?

도움이 될 것입니다.

+0

아마도 귀하의 질문을 이해하지 못하지만 예상대로 작동하는 것으로 보입니다. http://www.bootply.com/64937 "그대로 유지"한다는 것이 무엇을 의미하는지 명확히 할 수 있습니까? – ZimSystem

+0

그래서 내가 설명서를 이해할 수 없는지 궁금합니다. PUBLISHER에 대한 href는 실제로 참조하는 페이지로 이동하지 않습니다. 클릭 할 때마다 열리고 토글되어 드롭 다운이 닫히지 만 리디렉션은 닫히지 않습니다. 드롭 다운을 열거 나 클릭 한 다음 다시 publisher.php로 리디렉션하려고했습니다. 나는 그 문서를 올바르게 이해하지 못하고 그것을하기로되어 있지 않습니까? – fiercekitti

+0

링크 또는 토글 드롭 다운 중 하나만 탐색 할 수 있지만 둘 다 아닌 것으로 생각합니다. 아마도 jquery click 이벤트 핸들러를 사용하여 특별한 경우를 처리 할 수 ​​있습니다. – ZimSystem

답변

0

앞서 언급했듯이 onClick 이벤트를 사용할 수 있지만 모바일보기에서는이 이벤트를 사용하지 않도록 설정해야합니다. 이 드롭 다운 모바일에서 작업 할 수 있습니다

   $(document).ready(function(){ 
        $(window).resize(function(){ 
         if($(window).width() >= 920){ 
          $('.clickable-dropdown').on('click', function(){ 
           window.location.href=$(this).attr('href'); 
          }); 
         }else{ 
          $('.clickable-dropdown').on('click', function(){ 
           return false; 
          }) 
         } 
        }).resize(); 
       }); 

: 당신은 부트 스트랩 네비게이션 바을 사용하는 경우, 예를 들어, 당신은 당신의 전환 트리거에 ".clickable - 드롭 다운"클래스를 추가 한 후 다음 작업을 수행 할 수 있습니다 터치 이벤트가있는 기기는 클릭의 정상 기능을 캡처하지 않습니다. 불행히도 이것은 부트 스트랩의 드롭 다운 스크립트의 한계로 보이며 더 나은 기능이 필요한 경우 많은 다른 CSS 또는 jQuery 기반 드롭 다운 메뉴 중 하나를 사용하는 것이 좋습니다.

관련 문제