Question

我有两个Bootstrap 3.0下拉菜单，一个用于书籍，一个用于章节（供参考，我正在处理的网站是http://www.jbtbible.com/mobile）。两个下拉列表的html都在一个文件中（我将它们设置为btn-group），书籍列表是硬编码的，并且在按钮加载后使用jquery动态填充章节列表。我使用jquery来注册选择并从那里管理书籍/章节。这适用于我尝试过的所有桌面浏览器，并且书籍选择适用于移动浏览器，但章节选择不适用于移动浏览器（它构建列表，但选择一个选项不起作用）。我无法弄清楚差异是什么，因为生成的代码在两者之间看起来完全相同，并且两者的选择注册相同。

以下是一些相关的代码：

在我的标题中，我将其作为下拉按钮的占位符：

<div class="book-btn-fill">   
</div>

这是由这个jquery函数填充的：

var bookList = ["JBTHome", "Galatians","Ephesians","Philippians", "Philemon"];
var chapterList = [1,6,6,2,1];

function loadText() {
    $(".book-btn-fill").load('../book-selection-dropdown.html', function() {
        $(".book-button").html('<b>' + bookList[curBook] + '</b>');
        $(".chapter-button").html('<b>' + curChapter + '</b>');
        var chapters = "";
        for (var i = 1; i <= chapterList[curBook]; i++) {
            chapters = chapters + '<li><a class="nav-chapter-btn" data-value="' + i + '">' + i + '</a></li>';
        }
        $(".chapter-menu-fill").html(chapters);
        var height = $(window).height();
        $(".dropdown-menu").css("max-height", height - 85 + "px");
    });
    $(".body-text").load('../books/' + bookList[curBook] + '/' + curChapter + '.html', function() {
        applyOptions();
        $(".body-text").css("font-size", textSize + "px");
    });
}

book-selection-dropdown.html看起来像这样（我删除了大部分书籍选项，因此它更易于管理）：

<div class="btn-group">
  <div class="btn-group">
    <button type="button" class="btn btn-default btn-sm dropdown-toggle book-button" data-toggle="dropdown"></button>
    <ul class="dropdown-menu" role="menu">
      <li><a class="nav-book-btn" data-value="1">Galatians</a></li>
      <li><a class="nav-book-btn" data-value="2">Ephesians</a></li>
      <li><a class="nav-book-btn" data-value="3">Philippians</a></li>
      <li class="disabled"><a>Colossians</a></li>
      <li class="disabled"><a>1 Thessalonians</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default btn-sm dropdown-toggle chapter-button" data-toggle="dropdown"></button>
    <ul class="dropdown-menu chapter-menu-fill" role="menu">
    </ul>
  </div>
</div>

最后，我用以下函数注册选择：

$(document).on('click', '.nav-book-btn', function() {
    curBook = $(this).data("value");
    curChapter = 1;
    loadText();
});
$(document).on('click', '.nav-chapter-btn', function() {
    curChapter = $(this).data("value");
    loadText();
});

那么为什么这会在桌面上运行，并在移动设备上正确生成列表，但不允许在移动设备的章节列表中选择一个选项？

Answer 1

我不确定为什么会出现这个问题，但是修复它所需要的只是更改css以将光标设置为章节下拉列表中链接的指针。

我注意到悬停在两个下拉列表之间并不一致，并添加了css以使它们相同，现在导航全面工作。如果有人知道为什么样式更改会影响点击链接的能力，我很乐意听到，但这就是修复它的原因。

动态引导下拉列表无法在移动设备上运行

1 个答案: