小贝子编程

引导下拉列表.悬停时打开，但如何单击时关闭



我有一个引导下拉列表，它在悬停时打开(根据需要(，但我无法在单击时关闭它。具体来说，我希望在做出选择后关闭下拉列表。请问我该怎么做？请注意，所选内容反映在下拉列表文本中(这很好(，但下拉列表本身仍保持打开状态。

由于某种原因，我不明白我所说的下拉菜单，我的代码被附加，当您在运行下面的代码片段后全屏显示时出现，否则仅显示nav-bar header。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    
    <!--jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!--d3 -->
    <script src='https://d3js.org/d3.v4.min.js'></script>
    <style>
        /*Show/hide dropdown menu on mouse hover*/
        .dropdown:hover > .dropdown-menu {
            display: block;
        }
        /*Styling on the navbar*/
        .navbar-inverse {
          background-color: #3d4a57;
          border-color: #333;
        }
        .navbar-inverse .navbar-nav > li > a,
        .navbar a.navbar-brand {
              color: #fbfbfb;
              text-decoration: none;
            }
    </style>
</head>
<body class="application" id="body">
<!-- main page container, holding the nav tabs and content -->
<div id="container">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Some title</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown" id="myDropdown">
                            <a href="#" class="myDropdown dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                Select Data
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 1")'>Dataset 1</a></li>
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 2")'>Dataset 2</a></li>
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 3")'>Dataset 3</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li class="dropdown" id="dropdown-inefficiency">
                            <a href="#" class="dropdown-valueSetter dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                Intensity Value
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick='set_value("1.0")'>1.0</a></li>
                                <li><a class="dropdown-item" href="#" onclick='set_value("2.0")'>2.0</a></li>
                                <li><a class="dropdown-item" href="#" onclick='set_value("3.0")'>3.0</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </div>
    </div>
    <script>
        function myDropdownSelector(x){
            d3.select('.myDropdown').node().text = x + '  ';
            $('.myDropdown').append("<span class='caret'></span>");
        }
        function set_value(x){
            d3.select('.dropdown-valueSetter').node().text = 'Value: ' + x + '  '
            $('.dropdown-valueSetter').append("<span class='caret'></span>");
        }
    </script>
</div>
</body>
</html>

你正在使用一个大脚本(d3.v4.min.js(来为你做一些JavaScript中的下拉处理。如果您希望看到更具体的答案，请在将来提问时参考以下内容。

我尝试使用简单的jQuery根据您的要求使某些内容工作，结果是显示和隐藏某些下拉列表：

function myDropdownSelector(x) {
  d3.select('.myDropdown').node().text = x + '  ';
  $('.myDropdown').append("<span class='caret'></span>");
}
function set_value(x) {
  d3.select('.dropdown-valueSetter').node().text = 'Value: ' + x + '  '
  $('.dropdown-valueSetter').append("<span class='caret'></span>");
}
//Rather use jQuery DOM ready function to execute DOM manipulation over regular JavaScript
$(document).ready(function() {
	$(".nav.navbar-nav .dropdown-menu").on("click", ".dropdown-item", function() {
  	$(".dropdown-menu").hide();
  });
  $(".nav.navbar-nav .dropdown > a#foo").hover(function() {
  	$(".dropdown-menu#bar").show();
  });
  $(".nav.navbar-nav .dropdown > a#alpha").hover(function() {
  	$(".dropdown-menu#beta").show();
  });
});
/* Show/hide dropdown menu on mouse hover */
.dropdown:hover > .dropdown-menu {
  display: block;
}
/* Styling on the navbar */
.navbar-inverse {
  background-color: #3d4a57;
  border-color: #333;
}
.navbar-inverse .navbar-nav > li > a,
.navbar a.navbar-brand {
  color: #fbfbfb;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="application" id="body">
  <!-- main page container, holding the nav tabs and content -->
  <div id="container">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Some title</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown" id="myDropdown">
                <a href="#" class="myDropdown dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="alpha">
                                  Select Data
                                  <span class="caret"></span>
                              </a>
                <ul class="dropdown-menu" id="beta">
                  <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 1")'>Dataset 1</a></li>
                  <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 2")'>Dataset 2</a></li>
                  <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 3")'>Dataset 3</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav">
              <li class="dropdown" id="dropdown-inefficiency">
                <a href="#" class="dropdown-valueSetter dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="foo">
                  Intensity Value
                  <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="bar">
                  <li><a class="dropdown-item" href="#" onclick='set_value("1.0")'>1.0</a></li>
                  <li><a class="dropdown-item" href="#" onclick='set_value("2.0")'>2.0</a></li>
                  <li><a class="dropdown-item" href="#" onclick='set_value("3.0")'>3.0</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
      </div>
    </div>
  </div>
</div>

JSFiddle

选择后，下拉列表将关闭。就您所要求的而言，这应该可以解决您的(客户端(问题。

您可以通过获取 ul tag 的引用并像这样调用 hide(( 函数来关闭下拉列表。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <!--jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!--d3 -->
    <script src='https://d3js.org/d3.v4.min.js'></script>
    <style>
        /*Show/hide dropdown menu on mouse hover*/
        .dropdown:hover > .dropdown-menu {
            display: block;
        }
        /*Styling on the navbar*/
        .navbar-inverse {
          background-color: #3d4a57;
          border-color: #333;
        }
        .navbar-inverse .navbar-nav > li > a,
        .navbar a.navbar-brand {
              color: #fbfbfb;
              text-decoration: none;
            }
    </style>

</head>
<body class="application" id="body">

<!-- main page container, holding the nav tabs and content -->
<div id="container">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Some title</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown" id="myDropdown">
                            <a href="#" class="myDropdown dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                Select Data
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" id="dataset">
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 1")'>Dataset 1</a></li>
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 2")'>Dataset 2</a></li>
                                <li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 3")'>Dataset 3</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li class="dropdown" id="dropdown-inefficiency">
                            <a href="#" class="dropdown-valueSetter dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                Intensity Value
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" id="value">
                                <li><a class="dropdown-item" href="#" onclick='set_value("1.0")'>1.0</a></li>
                                <li><a class="dropdown-item" href="#" onclick='set_value("2.0")'>2.0</a></li>
                                <li><a class="dropdown-item" href="#" onclick='set_value("3.0")'>3.0</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </div>
    </div>
    <script>
        function myDropdownSelector(x){
            d3.select('.myDropdown').node().text = x + '  ';
            $('.myDropdown').append("<span class='caret'></span>");
            $("#dataset").hide();
        }
        function set_value(x){
            d3.select('.dropdown-valueSetter').node().text = 'Value: ' + x + '  '
            $('.dropdown-valueSetter').append("<span class='caret'></span>");
            $("#value").hide();
        }
    </script>

</div>
</body>
</html>

请注意函数 myDropdownSelector 和 set_value。

这是它在jsfiddle中的工作版本

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium