Question

我在这里看到几个关于下拉列表何时无法打开或打开后不会关闭的问题。我的问题是，当页面加载时，下拉菜单会加载为打开状态。这是我偶然发现的代码（http://jsfiddle.net/mariusc23/hts7F/）的工作副本。我默认无法关闭菜单。我的相关代码：

<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="includes/dropdownfix.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet"> 
</head>

和

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav navbar-right">
    <li><a href="index.php">Home</a></li>
    <li><a href="aboutus.php">About</a></li>
    <li><a href="contactus.php">Contact</a></li>
    <?php 
        if($profile_pic){
            echo"<img src=\"".$profile_pic."\" />";
        } 
    ?>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?php echo"$name"; ?>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
      <li><a href="index.php">test</a></li>

      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

请帮忙！我也相信，我使用bootstrap 3.3.5。感谢

编辑：我的坏，继承人dropdownfix.js，从http://jsfiddle.net/mariusc23/hts7F/复制。

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

    // Set aria-expanded to true
    dropdown.find('.dropdown-menu').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('.dropdown-menu').attr('aria-expanded', false);

    // Set focus back to dropdown toggle
    dropdown.find('.dropdown-toggle').focus();
});

Answer 1

你想尝试这样的工作吗？： JSFiddle

<nav class="navbar navbar-default">
<div class="container">
    <div class="collapse navbar-collapse" id="colapsableDropdown">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="index.php">Home</a></li>
            <li><a href="aboutus.php">About</a></li>
            <li><a href="contactus.php">Contact</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php">test</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

如果仍然不起作用，那么我建议您打开开发者控制台（浏览器检查元素选项）并检查它，因为您可能丢失了文件。

Bootstrap Dropdown扩展并且不会关闭

1 个答案: