Question

我正在制作一个HTML5 / Bootstrap iOS应用程序，我正在努力解决一些问题。第一个问题是，当我在下拉菜单外双击时，要关闭它，焦点将保持在焦点在菜单中的页面上的相同位置。它已经到了页面的顶部。

第二个问题是，从左到右滑动，我向下移动菜单，如果我在第二个项目＆＃39;焦点转到菜单下的内容。在关闭之前，我怎样才能将焦点保留在下拉菜单中。

我在下面提供了我的代码。

    <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

在第一期中，我发现将以下代码添加到节目和隐藏部分。

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

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

我还没有为第二个找到解决方案。

Bootstrap下拉菜单焦点问题

1 个答案: