javascript - 在 mouseout 上关闭下拉菜单

<分区>

我想在 mouseover 时打开下拉菜单，然后在 mouseout 时关闭它。我可以打开下拉菜单但不能关闭下拉菜单。

我的代码是，

在header.php文件中，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href="" onmouseover="myFunction1()" class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href="" onmouseover="myFunction()" class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>
     <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
         document.getElementById("myDropdown").classList.toggle("show");
  }

// Close the dropdown if the user clicks outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');

      }
    }
  }
}


function myFunction1() {
         document.getElementById("myDropdown1").classList.toggle("show");
  }

// Close the dropdown if the user clicks outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns1 = document.getElementsByClassName("dropdown-content1");
    var j;
    for (j = 0; j < dropdowns1.length; j++) {
      var openDropdown = dropdowns1[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');

      }
    }
  }
}

</script>
</body>
</html>

在header.css文件中，

body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4 cm
    display:inline-block;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4 cm
    display:inline-block;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

#nav{margin-left: 10cm}
.show {display:block;}

如何在鼠标移出时关闭下拉菜单，我知道通过使用 css 我们可以很容易地做到这一点。但是这里我不知道如何添加 css。以前，我将此用于其他用途，但在这里我不知道该怎么做。

你能帮帮我吗？

最佳答案

你可以使用纯CSS:

.dropbtn:hover ~ #nav .dropdown-content {
    display: block;
}

.dropbtn1:hover ~ #nav1 .dropdown-content1 {
    display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color:#CCC;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm
    display:none;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color:#CCC;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

#nav{margin-left: 10cm}
.show {display:block;}

.dropbtn:hover ~ #nav .dropdown-content {
	display: block;
}

.dropbtn1:hover ~ #nav1 .dropdown-content1 {
	display: block;
}

<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href=""  class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href=""  class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>

使用 jquery:

$(document).ready(function(){
    $('.dropbtn').click(function(){
        $('.dropdown-content1').hide();
        $('.dropdown-content').toggle();
    })

    $('.dropbtn1').click(function(){
        $('.dropdown-content').hide();
        $('.dropdown-content1').toggle();
    })
})

$(document).ready(function(){
	$('.dropbtn').click(function(){
		$('.dropdown-content1').hide();
		$('.dropdown-content').toggle();
	})

	$('.dropbtn1').click(function(){
		$('.dropdown-content').hide();
		$('.dropdown-content1').toggle();
	})
})

body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color:yellow ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color:red;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

#nav{margin-left: 10cm}
.show {display:block;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href="" class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href="" class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>

关于javascript - 在 mouseout 上关闭下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48576786/

上一篇：html - CSS3 布局网格 - 粘性标题

下一篇：html - 从 Bootstrap 3.3.7 迁移到 Bootstrap 4 : huge blank space at the bottom of the page

相关文章：

javascript - 判断数组中的某个元素是否为字符串

javascript - jQuery 验证后，联系表单不会提交

javascript - jQuery ajax 因未知原因失败

javascript - 在页面加载之前加载数据 AngularJS 和 NodeJS

javascript - 固定宽度内的响应式导航

javascript - 使用angularjs列出重新排序动画

JavaScript 评估错误

html - 选择 li 之一时，如何更改 li 之前或之后的 CSS？

javascript - 如何安全地将 Rails 模型属性传递给 JavaScript？

jquery - 使用淡入淡出显示/隐藏内容