单击使div向下滑动

Question

I am wanting a hidden div to slide down from the top of the screen when the user clicks on "Services".

When the div does slide down, I want the height to be height: 35vh; .

I am unsure of what I am doing wrong. Does anyone see the issue?

 $('#serviceClick').click( function () { $('serviceNav').addClass('active').slideDown(); console.log('The click is working'); }); 

 #serviceNav { width: 100%; top: -35vh; z-index: -1; position: absolute; background-color: rgba(0,0,0,0); } #serviceNav.active { height: 35vh; top: 0; width: 100%; background: red; z-index: 500; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <li id="serviceClick">SERVICES</li> <div id="serviceNav"></div> 

Answer 1

You forgot to add # in front of the ID

 $('#serviceClick').click( function () { $('#serviceNav').addClass('active').slideDown(); console.log('The click is working'); }); 

 #serviceNav { width: 100%; top: -35vh; z-index: -1; position: absolute; background-color: rgba(0,0,0,0); } #serviceNav.active { height: 35vh; top: 0; width: 100%; background: red; z-index: 500; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <li id="serviceClick">SERVICES</li> <div id="serviceNav"></div> 

Answer 2

Firstly - You need to reference the ID - $('#serviceNav') . Secondly - Why are you sliding down and adding a class which moves it anyway? Thirdly - You can't animate the height element, you should use max-height .

$('#serviceClick').click( function () {
        $('#serviceNav').addClass('active');
        console.log('The click is working');
});


#serviceNav {
    width: 100%;
    top: -35vh;
    z-index: -1;
    position: absolute;
    background-color: rgba(0,0,0,0);
    height: 35vh;
    display: none;
}
#serviceNav.active {
    top: 0;
    width: 100%;
    background: red;
    z-index: 500;
}

Edit - example: https://jsfiddle.net/664chupo/

Answer 3

Here is a working code and codepen.

HTML

   <li id="serviceClick">SERVICES</li>
    <div id="serviceNav">text</div>

CSS

#serviceNav {
    width: 100%;
    top: -35vh;
    z-index: -1;
    position: absolute;
    background-color: rgba(0,0,0,0);
}
#serviceNav {
    height: 0vh;
    top: 0;
    width: 100%;
    background: red;
    z-index: 500;
  display:none;
  transition: all 2s;
}

JS

$('#serviceClick').click( function () {
        $('#serviceNav').show();
  $('#serviceNav').css('height','35vh');
});

Codepen url: codepen