当我将鼠标悬停在其他菜单项上时删除课程

时间：2017-01-19 13:06:36

标签： javascript jquery onclick hover click

我的菜单项悬停/点击有问题。例如，当我单击菜单项Lorem 1，然后我将鼠标悬停在Lorem 3上时，下拉Lorem 1必须删除。怎么做？我在Jquery上这样做，但那不起作用。非常感谢你。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AAA</title>
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic-ext,cyrillic'
    rel='stylesheet' type='text/css'>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <!-- Smart banner -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="js/modernizr.js"></script>
   <!--  <script type="text/javascript">
        $(document).on('click', '[id^=navbarToggle]', function () {
            $('[id^= navbarToggle]').toggleClass('collapsed');
            $('.hamburger-menu__bar').toggleClass('bar-animate');
            $('[id^= navBar]').toggleClass('in');
            $('.navBar').toggle();
        });
    </script> -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</head>
<style type="text/css">
/*
        H E A D E R
*/
.header {
  position: relative;
  height: 120px !important;
  top: 0px !important;
  left: 0px !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  transition: .5s;
  z-index: 999; }

.navbar {
  height: 120px;
  background: #fff; }
  .navbar .container {
    height: 0; }

.navbar-header {
  height: 120px; }

.navbar-brand {
  height: auto;
  padding-top: 22px;
  margin-right: 15px; }

/*
        N A V B A R
*/
.navbar {
  border-radius: 0px;
  min-height: 50px;
  margin-bottom: 0px;
  border: none; }

.navbar-nav {
  position: relative;
  margin: 0;
  text-align: center;
  float: none;
  display: inline-block;
  background-color: #fff; }
  .navbar-nav li a {
    font-size: 14px;
    text-transform: uppercase;
    padding: 6px 0px;
    margin: 0px 16px;
    border-bottom: 3px solid transparent;
    color: #777; }
    .navbar-nav li a:hover {
      background-color: transparent;
      color: #222; }
  .navbar-nav li.active a {
    color: #222;
    border-bottom: 3px solid #01c2ff; }
  .navbar-nav li.active:hover {
    color: #222; }
  .navbar-nav li.active.dropdown.open:before {
    position: absolute;
    content: '';
    top: 70px;
    border-bottom: 9px solid #01c2ff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    left: 50%;
    margin-left: -6px; }
  .navbar-nav li .dropdown-menu_navbar {
    text-align: center; }
    .navbar-nav li .dropdown-menu_navbar a {
      display: inline-block;
      font-size: 13px;
      text-transform: none; }
    .navbar-nav li .dropdown-menu_navbar .navbar-li a {
      border-bottom: 3px solid transparent;
      margin: 15px 0px;
      text-transform: uppercase;
      font-size: 14px; }
      .navbar-nav li .dropdown-menu_navbar .navbar-li a:hover {
        border-bottom: 3px solid #01c2ff; }
    .navbar-nav li .dropdown-menu_navbar .primary a {
      color: #01c2ff;
      text-transform: uppercase;
      font-size: 14px; }
    .navbar-nav li .dropdown-menu_navbar a {
      border-bottom: none; }

.navbar-nav > li > .dropdown-menu_navbar {
  margin-top: 44px;
  padding-bottom: 20px; }
  .navbar-nav > li > .dropdown-menu_navbar .text-ell {
    width: 90%; }
  .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_about, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang {
    left: auto;
    right: 0px;
    padding: 8px 32px 29px 32px; }
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_about li, /*.navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li,*/ /*08.01*/ .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li {
      display: inline-block;
      width: 24%;
      margin-top: 15px; }
      .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li { width: 24%; margin: 15px auto; } /*08.01*/
      .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_about li a, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li a, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li a {
        text-transform: uppercase;
        margin: 0;
        border-bottom: 3px solid transparent;
        display: inline;
        font-size: 14px; }
    
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_about li:hover a,
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_about li.active a, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li:hover a,
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li.active a, .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li:hover a,
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li.active a {
      border-color: #01c2ff;
      color: #222;
      background-color: transparent; }
  .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org {
    left: -244px;
    padding: 8px 8px 29px 8px; }
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li:nth-of-type(1) {
      width: 32%; }
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li:nth-of-type(2) {
      width: 40%; }
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_org li:nth-of-type(3) {
      width: 26%; }
  .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang {
    right: 0px;
    width: 100%;
    padding: 8px 16px 29px 16px; }
    .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li {
      display: block;
      width: 100%; }
      .navbar-nav > li > .dropdown-menu_navbar.dropdown-menu_lang li a {
        display: block;
        margin: auto; }

.navbar-toggle {
  padding: 0;
  margin-top: 32px;
  margin-right: 0;
  margin-bottom: 0;
  background-color: transparent;
  background-image: none;
  /* border: 1px solid transparent; */
  border-radius: 4px;
  width: 60px;
  height: 50px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all; }
  .navbar-toggle:hover {
    background-color: #F4F4F4; }

/*
        H A M B U R G E R    I C O N
*/
.hamburger-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 25px;
  cursor: pointer; }

.hamburger-menu__bar,
.hamburger-menu__bar:after,
.hamburger-menu__bar:before {
  width: 40px;
  height: 5px; }

.hamburger-menu__bar {
  position: relative;
  transform: translateY(10px);
  background: #777;
  transition: all 0ms 300ms; }
  .hamburger-menu__bar.bar-animate {
    background: rgba(255, 255, 255, 0); }

.hamburger-menu__bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background: #777;
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.hamburger-menu__bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #777;
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.navbar-toggle.collapsed {
  background-color: #01c2ff;
  -webkit-transition: 0.3s all;
  transition: 0.3s all; }
  .navbar-toggle.collapsed .hamburger-menu__bar:before,
  .navbar-toggle.collapsed .hamburger-menu__bar:after {
    background: #fff; }

.hamburger-menu__bar.bar-animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.hamburger-menu__bar.bar-animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.navbar-collapse {
  text-align: center;
  height: 100%;
  padding: 40px 0px; }
  .navbar-collapse .container {
    padding: 0px; }

.navbar-nav_right li a {
  color: #929292; }
  .navbar-nav_right li a:first-of-type {
    margin-right: 40px; }
.navbar-nav_right .icon {
  position: absolute;
  top: 0; }

/**/
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover,
.nav > a,
.nav > a:focus,
.nav > a:focus:active,
.nav > a:active:focus,
.nav > a:hover {
  background-color: transparent;
  border-color: #01c2ff; }

.nav > li > a:focus,
.nav > li > a:hover {
  text-decoration: none;
  background-color: transparent; }

.text-ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

/*
        D R O P D O W N
*/
.dropdown.form-control {
  color: #111; }
  .dropdown.form-control .caret {
    right: 9px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    border: none;
    background: url("../images/caret.png") no-repeat;
    width: 14px;
    height: 8px; }
  .dropdown.form-control .dropdown-toggle {
    padding-right: 15px; }
.dropdown.lang-sep:before {
  position: absolute;
  content: '';
  right: -24px;
  top: 17px;
  height: 4px;
  width: 16px;
  background: #01c2ff; }
.dropdown.open {
  /* .dropdown-menu{
     display: none;
   }*/ }

.dropdown-menu_navbar {
  border-top: 3px solid #01c2ff;
  width: 555px; }

.dropdown-hover:hover a {
  border-bottom: 3px solid #01c2ff; }
.dropdown-hover:hover:hover {
  color: #777; }
.dropdown-hover:hover .dropdown-hover__content {
  display: block; }
  .dropdown-hover:hover .dropdown-hover__content:before {
    position: absolute;
    content: '';
    width: 100%;
    background: white;
    height: 44px;
    top: -47px;
    left: 0px; }

.dropdown-hover:hover:after {
  position: absolute;
  content: '';
  top: 72px;
  border-bottom: 9px solid #01c2ff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  left: 50%;
  margin-left: -6px;
  z-index: 9999; }

.dropdown-hover_lang:hover:after {
  left: 30%;
  margin-left: 0px; }

</style>
<body>
	<div class="header">
        <nav class="navbar">
            <div class="container">
                <div class="navbar-header">
              <button type="button" id="navbarToggle" class="navbar-toggle" data-toggle="collapse"
                    data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <div class="hamburger-menu">
                        <div class="hamburger-menu__bar"></div>
                    </div>
                </button>
            </div>
            <div id="navBar" class="collapse navbar-collapse">
                <div class="container">
                    <div class="navbar-collapse-scroll">
                        <ul class="nav navbar-nav">
                            <li class=" dropdown dropdown-hover">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Lorem 1<span
                                    class="caret hidden-lg hidden-md"></span></a>
                                    <ul class="dropdown-menu dropdown-menu_navbar dropdown-hover__content">
                                        <li class="navbar-li"><a href="#">Lorem </a></li>
                                        <li class="primary"><a href="#">Lorem</a></li>
                                        <li><a href="#" class="text-ell">Lorem</a>
                                        </li>
                                        <li><a href="#" class="text-ell">Lorem</a></li>
                                            <li><a href="#" class="text-ell">Lorem</a></li>
                                            <li><a href="#" class="text-ell">Lorem</a></li>
                                            <li><a href="#" class="text-ell">Lorem</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class=" dropdown not-dropdown-hover"><a href="#">Lorem 2</a></li>
                                    <li class=" dropdown dropdown-hover">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Lorem 3
                                            <span class="caret hidden-lg hidden-md"></span></a>
                                            <ul class="dropdown-menu dropdown-menu_navbar dropdown-menu_org dropdown-hover__content">
                                                <li class="navbar-li"><a href="#" class="text-ell">Lorem</a></li>
                                                <li class="navbar-li"><a href="#" class="text-ell">Lorem</a></li>
                                                <li class="navbar-li"><a href="#" class="text-ell">Lorem</a></li>
                                            </ul>
                                        </li>
                                     
                                        </ul>

  
                                        </div>
                                    </div>
                                </div>
                                <!--/.nav-collapse -->
                            </div>
                        </nav>
                    </div>
</body>
</html>

$('.dropdown').hover(function () {
var aaa = $(this).find('.data-toggle');
if (aaa.hasClass('open')) {
    aaa.removeClass('open')
} else {
    $('.nav dropdown.open').removeClass('open');
    aaa.addClass('open');
}});

3 个答案:

答案 0 :(得分：0)

试试此代码

$('.dropdown').hover(function () {
var aaa = $(this).find('.data-toggle');
    $('.nav dropdown.open').toggleClass('open');
    aaa.toggleClass('open');
}});

答案 1 :(得分：0)

您必须为代码添加mouseout操作，以便在您悬停时（甚至在您点击后）菜单消失。

检查更新的小提琴：https://jsfiddle.net/on6n63xc/

参考代码：

$('.dropdown').hover(function() {
  var aaa = $(this).find('.data-toggle');
  if (aaa.hasClass('open')) {
    aaa.removeClass('open')
  } else {
    $('.nav dropdown.open').removeClass('open');
    aaa.addClass('open');
  }
}, function() {
  if ($(this).hasClass("open")) {
    $(this).removeClass("open");
  }
});

答案 2 :(得分：0)

您可以使用jquery sibling方法执行此操作，如下面的代码演示jsfiddle.net/on6n63xc/1/：

   $('.dropdown').hover(function () {
     $(this).addClass('open');
     $(this).siblings('li.open').removeClass('open');
  });
相关问题
最新问题