Форум

Dencho · #1 (**permalink**) 02.03.2017, 12:55

Привет всем, нужна помощь в решение одного простого вопроса. Есть меню

<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

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>

Dencho · #3 (**permalink**) 02.03.2017, 15:08

поможет, но суть дела в том чтоб всё это сделать на событиях js

рони · #4 (**permalink**) 02.03.2017, 15:33

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

Форум

Справочник

Discord чат

Курсы javascript