javascript - CSS/JQuery : Menu List Titles Drop Down When Hovering Over Another List Item

标签 javascript jquery html css hover

每当我将鼠标悬停在“博客”选项上时，我应该会看到包含 3 个元素的列表。悬停本身功能完美:列表子项出现在列表项下方。但是，菜单项所在的 div 向下扩展，菜单项标题向下延伸到 div 的最底部，而悬停的列表项保留在原始位置。有人有什么想法吗？谢谢!

代码:

    //dropdown hover code
    $(document).ready(function()
    {
    
    	//hover menu bar list
    	$('li').hover(function()
    	{
    		//find children of list items
    		//add stop function to stop hover queue
    		$(this).find('ul>li').stop().fadeToggle(300);
    	});
    	//end dropdown hover
    
    	//menu background color hover
    	$('a').css('background-color', 'white').hover(function()
    	{
    		$(this).css('background-color', 'pink');
    	},
    	function()
    	{
    		$(this).css('background-color', 'white');
    	});
    	//end background color hover
    
    });
    //end ready function
    @media (max-width: 480px) {
    	#dropdown_menu li {
    		display: block !important;
    		border: 1px solid black !important;
    		border-right: none !important;
    		border-left: none !important;
    
    	}
    
    	#title_img_container {
    		margin-bottom: 10%;
    	}
    
    	#title_container {
    		margin-top: 0 !important;
    		margin-bottom: 10%;
    		position: relative !important;
    	}
    
    	#dropdown_menu li {
    		border-bottom: none !important;
    
    	}
    }
    
    /*Change size of title div at 650px*/
    @media (max-width: 650px) {
    	#title_container {
    		font-size: 3em !important;
    	}
    }
    
    /*Change size of title img at 807px*/
    @media (min-width: 807px) {
    	#title_img_container {
    		margin-top: 3%;
    	}
    
    	#title_img {
    		max-width: 650px;
    		height: auto;
    	}
    }
    
    /*Change size of title img at 1300px*/
    @media (min-width: 1300px) {
    	#title_img {
    		max-width: 600px;
    		max-height: 700px;
    	}
    }
    
    body {
    	/*background-color: #dee1e5;*/
    	background-image: url("./../img/title_chevron.jpg");
    	letter-spacing: 1px;
    }
    
    #title_img_container {
    	max-width: 100%;
    	height: auto;
    }
    
    #title_img {
    	border: solid 1px black; 
    	width: 100%;
    	height: auto;
    	box-shadow: 2px 2px 2px 5px #888888;
    }
    
    #title_container {
    	border: solid 2px black;
    	width: 100%;
    	font-family: 'Lobster', cursive;
    	font-size: 5em;
    	color: gold;
    	text-align: center;
    	background-color: white;	
    }
    
    #menu_container {
    	font-size: 30px;
    }
    
    #img_and_content {
    	margin: 5%;
    }
    
    #dropdown_menu,
    #dropdown_menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #dropdown_menu li{
    	display: inline-block;
    }
    
    #dropdown_menu a {
    	padding: 10px 20px;
    	display: block;
    	color: inherit;
    	text-decoration: none;
    }
    
    #dropdown_menu ul li {
    	display: none;
    	background-color: #afdbcd !important;
    	vertical-align: top;
    }
    
    li a {
    	color: gold;
    }
    
    #main_page_container {
    	padding: 2% 5% 2% 5%;
    	border: black 1px solid;
    	font-family: 'Helvetica', Arial;
    	background-color: white;
    }
    
    #content_title {
    	font-family: 'Lobster', cursive;
    }
    
    #footer_container {
    	color: black;
    	text-align: center;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<!--TITLE DIV-->
<div id="title_container">YOUR NAME
  <!--MENU DIV-->
  <div id="menu_container">
    <!--DROPDOWN MENU-->
    <ul id="dropdown_menu">
      <li><a href="#">Home</a></li> 
      <li><a href="final_about.html">About</a></li> 
      <!--HOVER MENU OPTIONS-->
      <li class="blogs"><a href="#">Blogs</a>
        <ul>
          <li><a href="final_motherhood.html">Motherhood</a></li>
          <li><a href="final_fitness.html">Fitness</a></li>
          <li><a href="final_marriage.html">Marriage and Family</a></li>
        </ul>
      </li>
      <!--END HOVER MENU OPTIONS-->
      <li><a href="final_contact.html">Contact</a></li>   
    </ul>
    <!--END DROPDOWN MENU-->
  </div>
  <!--END MENU DIV-->
</div>
<!--END TITLE DIV-->

<!--IMG AND CONTENT CONTAINER-->
<div id="img_and_content" class="container-fluid">
  <!--ROW DIV-->
  <div class="row">
    <!--TITLE IMG DIV-->
    <div id="title_img_container" class="col-md-6">
      <img id="title_img" src="./img/title_img.jpg">
    </div>
    <!--END TITLE IMG DIV-->

    <!--MAIN PAGE DIV-->
    <div id="main_page_container" class="col-md-6">
      <h1 id="content_title">Insert Title Here . . .</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget viverra ipsum. 
    </div>
    <!--END MAIN PAGE DIV-->
  </div>
  <!--END ROW DIV-->
</div>
<!--END IMG AND CONTENT CONTAINER-->


<!--FOOTER DIV-->
<div id="footer_container">
  &copy; 2018 Erika Marie McBride | Site by Kelly Catbagan
</div>
<!--FOOTER DIV-->

最佳答案

您可以将以下内容添加到您的 CSS 中来处理博客的子菜单，对于不在移动版本中的情况来说，这是一个非常简单的修复。我相信还有其他方法可以处理这个问题。在移动 View 中，您的子菜单默认显示。可能想看看做一个点击事件来切换显示/隐藏它在移动？

@media (min-width: 480px) {
  li.blogs ul {
    position: absolute;
    float: left;
    z-index: 1000;
  }
}

另外，仅供引用，您在 HTML 中不止一次包含了 jQuery 库源代码，这是没有必要的。我还删除了对您的本地 JS 和 IMG 文件以及此示例代码段的引用。

//dropdown hover code
$(document).ready(function() {

  //hover menu bar list
  $('li').hover(function() {
    //find children of list items
    //add stop function to stop hover queue
    $(this).find('ul>li').stop().fadeToggle(300);
  });
  //end dropdown hover

  //menu background color hover
  $('a').css('background-color', 'white').hover(function() {
      $(this).css('background-color', 'pink');
    },
    function() {
      $(this).css('background-color', 'white');
    });
  //end background color hover

});
//end ready function
@media (max-width: 480px) {
  #dropdown_menu li {
    display: block !important;
    border: 1px solid black !important;
    border-right: none !important;
    border-left: none !important;
  }
  #title_img_container {
    margin-bottom: 10%;
  }
  #title_container {
    margin-top: 0 !important;
    margin-bottom: 10%;
    position: relative !important;
  }
  #dropdown_menu li {
    border-bottom: none !important;
  }
}


/*Change size of title div at 650px*/

@media (max-width: 650px) {
  #title_container {
    font-size: 3em !important;
  }
}


/*Change size of title img at 807px*/

@media (min-width: 807px) {
  #title_img_container {
    margin-top: 3%;
  }
  #title_img {
    max-width: 650px;
    height: auto;
  }
}


/*Change size of title img at 1300px*/

@media (min-width: 1300px) {
  #title_img {
    max-width: 600px;
    max-height: 700px;
  }
}

body {
  /*background-color: #dee1e5;*/
  background-image: url("./../img/title_chevron.jpg");
  letter-spacing: 1px;
}

#title_img_container {
  max-width: 100%;
  height: auto;
}

#title_img {
  border: solid 1px black;
  width: 100%;
  height: auto;
  box-shadow: 2px 2px 2px 5px #888888;
}

#title_container {
  border: solid 2px black;
  width: 100%;
  font-family: 'Lobster', cursive;
  font-size: 5em;
  color: gold;
  text-align: center;
  background-color: white;
}

#menu_container {
  font-size: 30px;
}

#img_and_content {
  margin: 5%;
}

#dropdown_menu,
#dropdown_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#dropdown_menu li {
  display: inline-block;
}

#dropdown_menu a {
  padding: 10px 20px;
  display: block;
  color: inherit;
  text-decoration: none;
}

#dropdown_menu ul li {
  display: none;
  background-color: #afdbcd !important;
  vertical-align: top;
}

li a {
  color: gold;
}

#main_page_container {
  padding: 2% 5% 2% 5%;
  border: black 1px solid;
  font-family: 'Helvetica', Arial;
  background-color: white;
}

#content_title {
  font-family: 'Lobster', cursive;
}

#footer_container {
  color: black;
  text-align: center;
}

@media (min-width: 480px) {
  li.blogs ul {
    position: absolute;
    float: left;
    z-index: 1000;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <!--RESPONSIVE SETUP-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!--FONTS-->
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

  <title>YOUR NAME</title>
</head>

<body>
  <!--TITLE DIV-->
  <div id="title_container">YOUR NAME
    <!--MENU DIV-->
    <div id="menu_container">
      <!--DROPDOWN MENU-->
      <ul id="dropdown_menu">
        <li><a href="#">Home</a></li>
        <li><a href="final_about.html">About</a></li>
        <!--HOVER MENU OPTIONS-->
        <li class="blogs"><a href="#">Blogs</a>
          <ul>
            <li><a href="final_motherhood.html">Motherhood</a></li>
            <li><a href="final_fitness.html">Fitness</a></li>
            <li><a href="final_marriage.html">Marriage and Family</a></li>
          </ul>
        </li>
        <!--END HOVER MENU OPTIONS-->
        <li><a href="final_contact.html">Contact</a></li>
      </ul>
      <!--END DROPDOWN MENU-->
    </div>
    <!--END MENU DIV-->
  </div>
  <!--END TITLE DIV-->

  <!--IMG AND CONTENT CONTAINER-->
  <div id="img_and_content" class="container-fluid">
    <!--ROW DIV-->
    <div class="row">
      <!--TITLE IMG DIV-->
      <div id="title_img_container" class="col-md-6">
      </div>
      <!--END TITLE IMG DIV-->

      <!--MAIN PAGE DIV-->
      <div id="main_page_container" class="col-md-6">
        <h1 id="content_title">Insert Title Here . . .</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget viverra ipsum.
      </div>
      <!--END MAIN PAGE DIV-->
    </div>
    <!--END ROW DIV-->
  </div>
  <!--END IMG AND CONTENT CONTAINER-->


  <!--FOOTER DIV-->
  <div id="footer_container">
    &copy; 2018 Erika Marie McBride | Site by Kelly Catbagan
  </div>
  <!--FOOTER DIV-->


</body>

</html>

关于javascript - CSS/JQuery : Menu List Titles Drop Down When Hovering Over Another List Item，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51547354/

上一篇：html - 想要重叠 2 个 div，所以即使缩放窗口，它们也不会移动

下一篇：html - Bootstrap 3 站点上的 XS-6 列在移动设备上保持堆叠

相关文章：

javascript - 如果 div 包含另一个(或子)类为 "key"的 div，则更改单击的 div 的颜色

html - 表tr同高动态行数

javascript - pm2 自动启动 Discord.js 机器人在重新启动时不会再次连接(树莓派)

javascript - 在哪里可以找到用于将 Perl 数据结构转换为 JavaScript 数据结构的 Perl 模块？

javascript - 将 chacha20-poly1305 与 Node 一起使用

javascript - 如何通过 $routeParams 将 $scope 变量设置为 true？

jquery - 在多个 div 中加载外部 HTML

php - 使用滚动面板修复表头

javascript - 当页面的一部分被溢出 CSS 隐藏时，如何将图像置于浏览器中心？

javascript - 检查是否 innerHTML 里面包含任何 HTML 标签

©2024 IT工具网  联系我们