Помогите доработать JQUERY меню

112
14 января 2020, 03:40

$("nav div").click(function() { 
  $("ul").slideToggle(); 
  $("ul ul").css("display", "none"); 
}); 
$("ul li").click(function() { 
  $("ul ul").slideUp(); 
  $(this).find("ul").stop().slideToggle(); 
}); 
$(window).resize(function() { 
  if ($(window).width() > 768) { 
    $("ul").removeAttr('style'); 
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav> 
  <div class=""> 
    <i class="fas fa-bars"></i> 
  </div> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Drop 1 <i class="fas fa-sort-down"></i></a> 
      <ul> 
        <li><a href="#">Product 1</a></li> 
        <li><a href="#">Product 2</a></li> 
        <li><a href="#">Product 3</a></li> 
        <li><a href="#">Product 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Drop 2 <i class="fas fa-sort-down"></i></a> 
      <ul> 
        <li><a href="#">Product 1</a></li> 
        <li><a href="#">Product 2</a></li> 
        <li><a href="#">Product 3</a></li> 
        <li><a href="#">Product 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">FAQ</a></li> 
  </ul> 
</nav>

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

Answer 1

$("nav > ul > li").click(function(event) { 
  let ul = $(this).find("ul"); 
  if (ul.length && ul.is(':hover')) { 
    return false; 
  } 
  ul.slideToggle(); 
  $("ul ul").not(ul).slideUp(); 
  event.stopPropagation(); 
}); 
 
$(document).on("click", function() { 
  $("nav ul ul").slideUp(); 
});
ul ul { 
  display: none; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav> 
  <div class=""> 
    <i class="fas fa-bars"></i> 
  </div> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Drop 1 <i class="fas fa-sort-down"></i></a> 
      <ul> 
        <li><a href="#">Product 1</a></li> 
        <li><a href="#">Product 2</a></li> 
        <li><a href="#">Product 3</a></li> 
        <li><a href="#">Product 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Drop 2 <i class="fas fa-sort-down"></i></a> 
      <ul> 
        <li><a href="#">Product 1</a></li> 
        <li><a href="#">Product 2</a></li> 
        <li><a href="#">Product 3</a></li> 
        <li><a href="#">Product 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">FAQ</a></li> 
  </ul> 
</nav>

READ ALSO
Нужна помощь touch jquery touch, preventDefault

Нужна помощь touch jquery touch, preventDefault

Кто может подсказать, если я прописываю в скрипте jQueryTouch preventDefault: () то клик по экрану (ТАП) работает как при клике мышки (как и надо), но перестает...

112
Перетаскивание элемента на jQuery

Перетаскивание элемента на jQuery

Есть "карта" (map), внутри неё находится (#chart)

127
Datagridview c# access. Меняю строку меняется весь столбец

Datagridview c# access. Меняю строку меняется весь столбец

datagridview c# accessМеняю строку меняется весь столбец

126
Как можно преобразовать List&lt;Class&gt; в List&lt;String&gt;

Как можно преобразовать List<Class> в List<String>

При попытке заполнить список "List<Signal>" данными типа String из Csv файла возникает ошибка: "Не удается преобразовать String в DataGatherSignal", можно ли как-то...

103