jquery slideUp無法正常工作

當點擊div對象時，slideUp不起作用。jquery slideUp無法正常工作

jQuery代碼：

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

全部代碼是在這裏：Jsfiddle

來源

2015-09-18 Viktor

滑動或顯示？ – Xravn

你不需要.show()和.hide()當你.slideDown()和.slideUp()。

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

固定fiddle。

來源

2015-09-18 14:22:35 Amit

謝謝，據我瞭解slideUp /向下，有一個隱藏和顯示的默認選項 – Viktor

顯示和隱藏方法沒有必要。去掉它。

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

Jsfiddle

來源

2015-09-18 14:24:53 tetta

請檢查下面的代碼，我認爲它的工作 -

$('#show-about-btn').click(function() { 
 
\t $('#show-about-btn').html("&#9660;"); 
 
\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("&#9650;"); 
 
\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>

來源

2015-09-18 14:24:59

jquery slideUp無法正常工作

回答

相關問題