imothep85 Ответов: 2

Сделать мое меню ul li свернутым при нажатии на один li ?

всем привет, это мое html-меню !
Что мне нужно, так это создать скрипт js/jquery, который делает это, когда я нажимаю на свое меню гамбургера, он открывает "меню", которое содержит ul li a !
И когда я нажимаю на один из ли, его нужно закрыть !

Как я могу достичь этого, пожалуйста, я пробовал много вещей, но ничего не сработало !
<nav class="navbar">
    <div class="logo">MY LOGO</div>
    <a href="#" class="hamburger" >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="menu">
        <ul> 
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#donate">Donate</a></li>
          <li><a href="#download">Download</a></li>
          <li><a href="#howto">How</a></li>
          <li><a href="#reports">Reports</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

Я попробовал этот небольшой скрипт jQuery, на самом деле, когда я нажимаю на "гамбургер", он открывает "меню", но когда я нажимаю на один из li a ничего не происходит, меню не сворачивается "закрыть"

так что мне действительно нужна помощь, чтобы решить мою проблему !
Спасибо всем, кто может помочь !

Что я уже пробовал:

const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
  menu.classList.toggle('active')
})

2 Ответов

Рейтинг:
2

Sandeep Mewara

Вот вам пример, чтобы попробовать:
базовый HTML:

<body>  
    <div class="container">  
        <ul>  
            <li class="dropdown cssState">  
                Tamilnadu  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                 </ul>  
            </li>  
   
            <li class="dropdown cssState">  
                Andhra  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
            <li class="dropdown cssState">  
                Kerala  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
                
            <li class="dropdown cssState">  
                Tamilnadu  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
   
            <li class="dropdown cssState">  
                Andhra  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
            <li class="dropdown cssState">  
                Kerala  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
        </ul>   
    </div>  
</body>

Таблица стилей:
<style>  
        li.dropdown ul {  
          display : none; /*To hide the items while loading the page */  
        }  
              
        .container {  
          width:70%;   
          float: left;           
        }  
         
        /* Main style part for the menu and items look and feel */  
        .container .cssState {  
            float: left;  
            display:block;  
            border-top-style: solid;  
            border-top-width:1px;  
            border-top-color:black;  
            border-bottom-width:1px;  
            border-bottom-color:grey;  
            border-bottom-style:solid;  
            width: 200px;  
            border-right-style:solid;  
            border-right-color:white;  
            border-right-width:10px;            
            padding: 2px;  
            cursor: pointer;  
            font-weight: bold;  
        }  
             
    </style>

Javascript для переключения: 
/* This is the place where the toggling of showing and hiding items happens*/  
  
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>  
  
<script type="text/javascript">  
    $(document).ready(function(){  
        $('li.dropdown').click(function () {  
            $('li.dropdown').not(this).find('ul').hide();  
            $(this).find('ul').toggle();  
        });  
     });  
    </script>

Ссылка: Меню и элементы с развернутым и свернутым видом с помощью jQuery[^]

imothep85

Это не работает
на моем html я должен сначала нажать на "гамбургер", который открывает "меню", содержащее все мои li a.

         <nav class="navbar">
            <div class="logo">MY LOGO</div>
            <a href="#" class="hamburger" >
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
            </a>
            <div class="menu">
            <ul> 
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#donate">Donate</a></li>
              <li><a href="#download">Download</a></li>
              <li><a href="#howto">How</a></li>
              <li><a href="#reports">Reports</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          </nav>

Sandeep Mewara

Нет необходимости слишком. Я поделился всем примером, пожалуйста, обратитесь к нему. Вам просто нужно определить ul-li и classe, чтобы заплатить с помощью jquery

imothep85

Я сделал некоторые изменения
Скрыть   скопировать кодСкрыть   скопировать код

         <nav class="navbar">            <div class="logo">MY LOGO</div>            <a class="hamburger" >              <span class="bar"></span>              <span class="bar"></span>              <span class="bar"></span>            </a>            <div class="menu">            <ul>               <li><a href="#home">Home</a></li>              <li><a href="#about">About</a></li>              <li><a href="#donate">Donate</a></li>              <li><a href="#download">Download</a></li>              <li><a href="#howto">How</a></li>              <li><a href="#reports">Reports</a></li>              <li><a href="#contact">Contact</a></li>            </ul>          </div>          </nav>


и jQuery

Скрыть   скопировать кодСкрыть   скопировать код
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>    <script type="text/javascript">      $(document).ready(function(){          $('li.dropdown').click(function () {              $('li.dropdown').not(this).find('ul').hide();              $(this).find('ul').toggle();          });       });      </script>


но это не работает !!
Я не хочу менять свой css, потому что меню уже разработано !
вот мое меню : https://ibb.co/b18Phww

единственная отсутствующая функция в моем коде - это закрытие меню при нажатии любого li 
const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
  menu.classList.toggle('active')
})

Рейтинг:
1

imothep85

ЛАДНО, РЕШЕНО !!!

<script>

/// this toggle the hamburger menu ON and show the menu ///

$( '.hamburger' ).click(function() {
$( '.menu' ).toggleClass('active');
});

/// this activate the click menu ON and hide the menu ///

$( '.menu li' ).click(function() {
$( '.menu' ).toggleClass('active');
});

</script>