Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2017, 12:55
Интересующийся
Отправить личное сообщение для Dencho Посмотреть профиль Найти все сообщения от Dencho
 
Регистрация: 23.11.2015
Сообщений: 17

javascript menu
Привет всем, нужна помощь в решение одного простого вопроса. Есть меню
<ul id="js_menu" class="js_menu">
    <li class="item_el" id="id-el-1">item1</li>
    <li class="item_el disabled" id="id-el-2">item2</li>
    <li class="item_el" id="id-el-3">item3</li>
    <li class="item_el has_sub_menu" id="id-el-4">item4
        <ul class="sub_menu">
            <li class="item_el" id="id-el-5">item1</li>
            <li class="item_el has_sub_menu" id="id-el-6">item2
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-7">item1</li>
                    <li class="item_el" id="id-el-8">item2</li>
                    <li class="item_el" id="id-el-9">item3</li>
                    <li class="item_el" id="id-el-10">item4</li>
                </ul>
            </li>
            <li class="item_el" id="id-el-11">item3</li>
            <li class="item_el has_sub_menu" id="id-el-12">item4
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-13">item1</li>
                    <li class="item_el" id="id-el-14">item2</li>
                    <li class="item_el" id="id-el-15">item3</li>
                    <li class="item_el" id="id-el-16">item4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

При наведение на пункт которые вмещает в себя sub_menu как мне сделать так чтоб оно не закрывалось ?
(function () {

    document.oncontextmenu = function () {
      return false;
    };

document.addEventListener('mouseover', mouse_over, false);

    function mouse_over(e) {
        var elem = e.target;
        
        if(elem.tagName == 'LI'){

            var cur_el_id = elem.getAttribute('id');
            var relatedTarget = e.relatedTarget;
            elem.className = elem.className + ' active';

            //var children = elem.parentElement.children;

            //relatedTarget.className = relatedTarget.className.replace(/ active/, '');

        }
    }

})()
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2017, 13:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dencho,
может css хватит?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
    position: relative;
  }

  li > .sub_menu  {
    display: none;
  }
  li:hover > .sub_menu  {
    display:  block;
     margin-left: 10px;
     position:  absolute;
     top: 0px;
     left: 10px;
  }
  </style>

  <script>

  </script>
</head>

<body>
<ul id="js_menu" class="js_menu">
    <li class="item_el" id="id-el-1">item1</li>
    <li class="item_el disabled" id="id-el-2">item2</li>
    <li class="item_el" id="id-el-3">item3</li>
    <li class="item_el has_sub_menu" id="id-el-4">item4
        <ul class="sub_menu">
            <li class="item_el" id="id-el-5">item1</li>
            <li class="item_el has_sub_menu" id="id-el-6">item2
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-7">item1</li>
                    <li class="item_el" id="id-el-8">item2</li>
                    <li class="item_el" id="id-el-9">item3</li>
                    <li class="item_el" id="id-el-10">item4</li>
                </ul>
            </li>
            <li class="item_el" id="id-el-11">item3</li>
            <li class="item_el has_sub_menu" id="id-el-12">item4
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-13">item1</li>
                    <li class="item_el" id="id-el-14">item2</li>
                    <li class="item_el" id="id-el-15">item3</li>
                    <li class="item_el" id="id-el-16">item4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2017, 15:08
Интересующийся
Отправить личное сообщение для Dencho Посмотреть профиль Найти все сообщения от Dencho
 
Регистрация: 23.11.2015
Сообщений: 17

поможет, но суть дела в том чтоб всё это сделать на событиях js
Ответить с цитированием
  #4 (permalink)  
Старый 02.03.2017, 15:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dencho,
зачем снимать или добавлять класс скриптом так принцииально?
рыть тут mouseenter/leave
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
статическое меню Schokk Элементы интерфейса 16 11.02.2015 18:18
Не появляются картинки через jquery lobanov_kirill_ jQuery 1 22.09.2012 20:05
Меню сайта на javascript mix69 Элементы интерфейса 0 01.02.2012 11:04
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34