Удалить класс, когда я нахожу на другом пункте меню

-1

У меня проблема с наложением/щелчком пунктов меню. Например, когда я нажал на пункт меню 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> --> 
 
\t <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> 
 
\t <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'); 
}});

источник

2017-01-19 z_u_l

Не мог бы вы загрузить код к JSfiddle? –

вы знаете, что функция, которую вы написали, не переключается, чтобы переключать, просто используйте второй блок оператора if все время $ ('. Nav dropdown.open'). RemoveClass ('open'); aaa.addClass ('open'); – Ayyash

Вы должны добавить 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"); 
    } 
});

источник

2017-01-19 13:17:20 nashcheez

спасибо, очень бабушка –

Добро пожаловать! – nashcheez

Попробуйте этот код

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

источник

2017-01-19 13:11:56

Это не сработает. Не удалять меню действий после нажатия. – nashcheez

Вы можете сделать это с помощью метода JQuery родственного, как показано ниже кода Demo jsfiddle.net/on6n63xc/1/:

$('.dropdown').hover(function() { 
    $(this).addClass('open'); 
    $(this).siblings('li.open').removeClass('open'); 
    });

источник

2017-01-19 14:01:09

Удалить класс, когда я нахожу на другом пункте меню

ответ

Смежные вопросы