点击

Question

当用户点击＆＃34;服务＆＃34;时，我希望隐藏的div从屏幕顶部向下滑动。

当div向下滑动时，我希望高度为height: 35vh;。

我不确定我做错了什么。有没有人看到这个问题？

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您忘记在ID

前添加＃

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先 - 您需要引用ID - $('#serviceNav')。 其次 - 为什么你向下滑动并添加一个移动它的类呢？ 第三 - 您无法为height元素制作动画，您应该使用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;
}

编辑 - 示例：https://jsfiddle.net/664chupo/

Answer 3

这是一个有效的代码和代码。

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网址：codepen