Отзывчивая навигация не будет открываться после использования .slideUp()

Я использую следующий код, чтобы открыть свою отзывчивую навигацию и закрыть его, когда выбрана ссылка:Отзывчивая навигация не будет открываться после использования .slideUp()

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").toggleClass("open"); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideUp(); 

    }); 
});

Это прекрасно работает, однако, как только навигация закрыл кнопку nav, не работает. У кого-нибудь есть идеи? Любая помощь с этим будет с благодарностью оценена!

HTML, для нав:

<nav id="nav"> 
<div class="wrapper"> 
    <div class="brand"> 
     <img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1> 
    </div> 
     <span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span> 
    <ul> 
     <li><a href="#intro" class="slide">Home</a></li> 
     <li><a href="#aboutme" class="slide">About Me</a></li> 
     <li><a href="#contactme" class="slide">Contact Me</a></li> 
     <li><a href="#">Blog</a></li> 
    </ul> 
</div> 
</nav>

источник

2016-09-13 dannyhatton

Является ли открытый класс еще на навв-н-м, когда ползунок завершен? Возможно, захотите удалитьClass на нем, когда переход будет выполнен. –

Привет, Скотт, как я могу это сделать? Я очень много начинаю, когда речь заходит о JQuery. – dannyhatton

Любой шанс, который вы могли бы показать, также является вашим html? – Canvas

Вместо slideUp() использовать slideToggle() это будет срабатывать как slideUp() и slideDown() четные/нечетные щелчки

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

    $("nav ul").slideToggle(); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideToggle(); 

    }); 

});

Вы можете скрыть меню изначально, добавив дисплей none в UL

<ul style="display:none">

А затем нажмите на гамбургер нав это откроет меню, и все будет прекрасно работать наверняка

Demo: https://jsbin.com/zohoqi/3/edit?html,js,console,output

Попробуйте этот раз дружище !!

источник

2016-09-13 19:40:31 KrishCdbry

Спасибо @KrishCdbry Я протестировал его, но, к сожалению, он не работает и дает тот же результат. – dannyhatton

Только что обновленный код и добавленная демонстрационная ссылка взгляните на него, как только дам надеется, что это поможет. – KrishCdbry

@KrishCdbry просто короткое примечание стороны, вы можете захотеть поставить '.stop()' перед 'toggleSlide()', если пользователь решит продолжать нажимать кнопку «Развернуть навигацию», он будет просто продолжать движение вверх и вниз – Canvas

попробовать это:

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").slideToggle(); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideUp(); 

    }); 

});

Окончательный код:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
    <body> 
 
     
 
     <nav id="nav"> 
 
<div class="wrapper"> 
 
    <div class="brand"> 
 
     <img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1> 
 
    </div> 
 
     <span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span> 
 
    <ul> 
 
     <li><a href="#intro" class="slide">Home</a></li> 
 
     <li><a href="#aboutme" class="slide">About Me</a></li> 
 
     <li><a href="#contactme" class="slide">Contact Me</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</div> 
 
</nav> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <script> 
 
      
 
     $(document).ready(function() { 
 

 
      $(".burger-nav").on("click", function(){ 
 

 
       $("nav ul").slideToggle(); 
 

 
      }); 
 

 
      $("nav li a").on("click", function() { 
 

 
       $("nav ul").slideUp(); 
 

 
      }); 
 

 
     }); 
 
    
 
     </script> 
 
    </body> 
 
</html>

источник

2016-09-13 20:01:06 Ehsan

Если я не полностью упустил что-то, что весьма вероятно, кнопка nav не активируется с этим решением. Хотя я вижу, что он работает, когда код запущен. То же самое для вышеупомянутого решения @KrishCdbry – dannyhatton

Спасибо всем, кто помог с этим, @KrishCdbry пришли ближе, но ниже разрешенное сценарий :

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").toggleClass("open"); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").toggleClass(); 

    }); 
});

Единственная разница в том, что («открывать») после toggleClass, просто, когда вы знаете, как, а?

источник

2016-09-13 21:05:06 dannyhatton

Отзывчивая навигация не будет открываться после использования .slideUp()

ответ

Смежные вопросы