Bootstrap Dropdown-Menü Fokus Probleme

Question

Ich mache eine HTML5/Bootstrap iOS-App und ich versuche, ein paar Probleme zu lösen. Das erste Problem ist, dass wenn ich zweimal außerhalb des Dropdown-Menüs tippe, der Fokus an der gleichen Stelle auf der Seite bleibt, auf der der Fokus im Menü war. Es ging zum Anfang der Seite.

Das zweite Problem ist, dass als wischen von links nach rechts, ich gehe das Menü und wenn ich auf "2nd item" Fokus geht auf den Inhalt unter dem Menü. Wie kann ich den Fokus nur im Dropdown-Menü halten, bis ich ihn schließe?

Ich habe meinen Code unten eingefügt.

<div class="container" role="dialog"> 

     <div class="dropdown" role="document"> 
      <button id="btnMenu" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" arid-haspopup="true" aria-expanded="false"> 
       Cool dropdown <span class="caret"></span> 
      </button> 

      <ul class="dropdown-menu" role="menu" aria-expanded="false"> 
       <li><a href="">First page</a></li> 
       <li><a href="">2nd page</a></li> 
       <li><a href="">3rd page</a></li> 
       <li class="divider"></li> 
       <li><a href="">1st item</a></li> 
       <li><a href="">2nd item</a></li> 
      </ul> 
     </div> 
    </div> 
<footer> 
    <div class="container"> 
     <hr> 
     <p><small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p> 
     <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p> 
     <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small></p> 
    </div> <!-- end container --> 
</footer> 

<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
    // On dropdown open 
    $(document).on('shown.bs.dropdown', function(event) { 
     var dropdown = $(event.target); 

     // Set aria-expanded to true 
     dropdown.find('#btnMenu').attr('aria-expanded', true); 

     // Set focus on the first link in the dropdown 
     setTimeout(function() { 
      dropdown.find('.dropdown-menu li:first-child a').focus(); 
     }, 10); 
    }); 

    // On dropdown close 
    $(document).on('hidden.bs.dropdown', function(event) { 
     var dropdown = $(event.target); 

     // Set aria-expanded to false   
     dropdown.find('#btnMenu').attr('aria-expanded', false); 

     // Set focus back to dropdown toggle 
     dropdown.find('#btnMenu').focus(); 
    }); 
</script> 

Answer 1

In der ersten Ausgabe fand ich den folgenden Code zu den Show und versteckte Abschnitte funktioniert.

// Hide everything around menu 
     $('#mainHeader, footer').attr('aria-hidden', 'true'); 

    // Show everything around menu 
     $('#mainHeader, footer').attr('aria-hidden', 'false'); 

Ich habe immer noch keine Lösung für die zweite gefunden.