JQuery slideUp не работает

Question

slideUp не работает при нажатии на объект div.

Jquery код:

$('#show-about-btn').click(function() { 
    $('#show-about-btn').html("▼"); 
    if($('.menu-nav').css('display')=='none') { 
     $('.menu-nav').slideDown("fast").show(); 
    } else { 
     $('.menu-nav').slideUp().hide(); 
     $('#show-about-btn').html("▲"); 
    } 
}); 

Полный код здесь: Jsfiddle

Answer 1

Вам не нужно .show() и .hide() когда вы .slideDown() и .slideUp().

$('#show-about-btn').click(function() { 
    $('#show-about-btn').html("▼"); 
    if($('.menu-nav').css('display')=='none') { 
     $('.menu-nav').slideDown(); 
    } else { 
     $('.menu-nav').slideUp(); 
     $('#show-about-btn').html("▲"); 
    } 
}); 

Исправлено: fiddle.

Answer 2

Нет необходимости в методах show и hide. Убери это.

if($('.menu-nav').css('display')=='none') { 
    $('.menu-nav').slideDown(); 
} else { 
    $('.menu-nav').slideUp(); 
    $('#show-about-btn').html("▲"); 
} 

Jsfiddle

Answer 3

Пожалуйста, проверьте ниже код, я думаю, что это работает -

$('#show-about-btn').click(function() { 
 
\t $('#show-about-btn').html("▼"); 
 
\t if($('.menu-nav').css('display')=='none') { 
 
\t \t $('.menu-nav').slideDown(); 
 
\t } else { 
 
\t \t $('.menu-nav').slideUp(); 
 
\t \t $('#show-about-btn').html("▲"); 
 
\t } 
 
});

.subnav li { 
 
\t list-style: none; 
 
\t float: left; 
 
\t padding: 1px 60px 1px 1px; 
 
} 
 

 
.subnav { 
 
\t max-width: 600px; 
 
\t height: 50px; 
 
\t line-height: 3em; 
 
\t border-bottom: 1px solid #ccc; 
 
} 
 

 
.tab{ 
 
\t position: relative; 
 
\t top: 25px; 
 
\t width: 600px; 
 
} 
 

 
.menu-nav { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#"><h1 class="title">Link</a><a href="#" id="show-about-btn">&#9650;</a></h1> 
 

 
<div class="menu-nav"> \t 
 
\t \t \t \t \t <nav class="subnav"> 
 
\t \t \t \t \t \t <ul class="tabs"> 
 
\t \t \t \t \t \t \t <li><a href="#portfolio" class="active">Portfolio</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#about_us">About Us</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#contact_us">Contact Us</a></li> 
 
\t \t \t \t \t \t </ul> \t 
 
\t \t \t \t \t </nav> 
 

 
\t \t <div class="sub-content"> \t \t 
 
\t \t \t <article> 
 
\t \t \t \t <div class="tab" id="portfolio"> 
 
\t \t \t \t \t <p>1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="tab" id="about_us"> 
 
\t \t \t \t \t <p>2.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="tab" id="contact_us"> 
 
\t \t \t \t \t <p>3.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </article> 
 
\t \t </div> \t 
 
\t </div>