2

Как сделать, чтобы при клике на заголовок меню развернулось подменю, и так же закрывалось при клике?

2
  • 1
    что Вы пробовали сделать и что у Вас не получилось?
    – Alex
    29 дек 2016 в 8:04
  • если Вам дан исчерпывающий ответ, пожалуйста отметьте подходящий ответ как решение Вашего вопроса(зеленая галка под цифрой слева от текста ответа).
    – Alex
    4 янв 2017 в 19:52

5 ответов 5

5

Вариант с добавлением класса

$(function() {
  $('.menu').click(function() {
    if($('.submenu').hasClass('a')){
      $('.submenu').removeClass('a');
    }else{
      $('.submenu').addClass('a');
    };
    return false;
  });
});
.submenu {display:none;}
.submenu.a {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" class="menu">Я пункт меню :)</a>
<ul class="submenu">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

1
  • Так проще toggleClass. А в jQuery UI есть даже версия метода toggleClass с различными анимациями. 29 дек 2016 в 14:09
4

Вариант с toggle().

Переключает режим отображения каждого из элементов набора. Если элемент скрыт, то данная функция отображает его (используя метод show); если элемент видимый -- скрывает его (используя метод hide).

$(function() {
  $('.menu').click(function(e) {
    e.preventDefault();
    $('.submenu').toggle();
  });
});
.submenu{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" title="" class="menu">Я еще один пункт меню</a>
<ul class="submenu">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

5
4

Например toggleClass:

$('.trigger').on('click', function(e){
  e.preventDefault();
  
  $('#js-menu').toggleClass('open');
});
#js-menu {
  display: none;
}

#js-menu.open {
  display: block;
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

  <button class="trigger">	&#926;</button>
  
  <ul id="js-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>

Или slideToggle:

$('.trigger').on('click', function(e){
  e.preventDefault();
  
  $('#js-menu').slideToggle();
});
#js-menu {
  display: none;
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

  <button class="trigger">	&#926;</button>
  
  <ul id="js-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>

1
  • Главное потом не забыть, что сигнатура .toggleClass( [state ] )is deprecated as of jQuery 3.0. 29 дек 2016 в 10:27
3

Вариант без использования классов, без дополнительной разметки, без CSS, без jQuery — чистый JS.

const button = document.querySelector('button')
const ul = document.querySelector('ul')

ul.setAttribute('hidden', true)

button.addEventListener('click', function() {
  ul.toggleAttribute('hidden')
})
<button>click me</button>
<ul>
  <li>ololo 1
    <li>ololo 2
      <li>ololo 3
</ul>

2
0

На чистом js -

let nav = document.body.querySelector('.nav');

nav.addEventListener('click', nav_clickHandler);

function nav_clickHandler( {target} ){
  if( target.classList.contains('dropdown') ){
    let item = target.parentNode.querySelector(`[data-target="${target.dataset.toogle}"]`);
    let state = item.dataset.active;
    
    item.dataset.active = state === "true" ? false : true;
  }
}
ul {
  list-style: none;
  
  padding: 0;
}

[data-active="false"] {
  height: 0;
  
  overflow: hidden;
}
<ul class="nav">
  <li>
    <span class="dropdown" data-toogle="first">first</span>
    <ul data-target="first" data-active="false">
      <li><span>first 1</span></li>
      <li><span>first 1</span></li>
    </ul>
  </li>
  <li>
    <span class="dropdown" data-toogle="second">second</span>
    <ul data-target="second" data-active="false">
      <li><span>second 1</span></li>
      <li><span>second 1</span></li>
    </ul>
  </li>
</ul>

На чистом css (его не советуют в коментах и я с этим согласен, но все же оставлю его) -

ul {
  list-style: none;
  
  padding: 0;
}

input[type="checkbox"]:not(:checked) + ul {
  height: 0;
  
  overflow: hidden;
}
<ul>
  <li>
    <label for="first-section">first</label>
    <input type="checkbox" id="first-section" hidden>
    <ul class="slider">
      <li><span>first 1</span></li>
      <li><span>first 2</span></li>
    </ul>
  </li>
  <li>
    <label for="second-section">second</label>
    <input type="checkbox" id="second-section" hidden>
    <ul class="slider">
      <li><span>second 1</span></li>
      <li><span>second 2</span></li>
    </ul>
  </li>
</ul>

8
  • жуткий способ для меню\навигации )
    – SVE
    29 дек 2016 в 8:33
  • @Alex а я просто этого не знаю, я как вариант показал.
    – user220409
    29 дек 2016 в 8:37
  • @Elena для меня не менее жутко использовать jq в 2017 году :)
    – user220409
    29 дек 2016 в 8:37
  • @OlmerDale вы из будущего? 29 дек 2016 в 10:28
  • @АлексейШиманский если Вы не о погрешности в несколько дней, то я реально считаю что использование jq это несколько шагов назад. Уже несколько лет как полностью решена проблема с поддержкой браузерами и сам js стал лучше чем jq. Использовать её сегодня означает вычеркнуть пункт о саморазвитии на будущие.
    – user220409
    29 дек 2016 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.