弹出而不是向下

Question

我试图更改此代码，以便我可以弹出而不是弹出？

我需要这个在网页底部的移动设备上运行，或者除非其他人有更好的解决方案我愿意接受建议

提前致谢

$(function() {
			// Clickable Dropdown
			$('.click-nav > ul').toggleClass('no-js js');
			$('.click-nav .js ul').hide();
			$('.click-nav .js').click(function(e) {
				$('.click-nav .js ul').slideToggle(200);
				$('.clicker').toggleClass('active');
				e.stopPropagation();
			});
			$(document).click(function() {
				if ($('.click-nav .js ul').is(':visible')) {
					$('.click-nav .js ul', this).slideUp();
					$('.clicker').removeClass('active');
				}
			});
		});

/*------------------------------------*\
    RESET
\*------------------------------------*/

*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
body {
	font:400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background:#333;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.wrapper {
	max-width:1280px;
	margin:0 auto;
}
.header {
	padding:15px 25px;
	background:#FFF;
	border-left:5px solid #2BA6CB;
	overflow:hidden;
}
.logo {
	float:left;
}
.nav {
	float:right;
	margin:12px 0;
	list-style:none;
}
.nav-link {
	
}
.nav-link a {
	color:#2BA6CB;
	text-decoration:none;
}
/*------------------------------------*\
   Clickable Dropdown
\*------------------------------------*/

body {
	background:url(../img/bg.png);
}
.click-nav {
	margin:100px auto;
	width:200px;
}
.click-nav ul {
	font-weight:900;
}
.click-nav ul li {
	position:relative;
	list-style:none;
	cursor:pointer;
}
.click-nav ul li ul {
	position:absolute;
	left:0;
	right:0;
}
.click-nav ul .clicker {
	background:#2284B5;
	color:#FFF;
}
.click-nav ul .clicker:hover,
.click-nav ul .active {
	background:#196F9A;
}
.click-nav img {
	position:absolute;
	top:9px;
	left:12px;
}
.click-nav ul li a {
	transition:background-color 0.2s ease-in-out;
	-webkit-transition:background-color 0.2s ease-in-out;
	-moz-transition:background-color 0.2s ease-in-out;
	display:block;
	padding:8px 10px 8px 40px;
	background:#FFF;
	color:#333;
	text-decoration:none;
}
.click-nav ul li a:hover {
	background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
	display:none;
}
.click-nav .no-js:hover ul {
	display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Clickable Nav -->
		<div class="click-nav">
			<ul class="no-js">
				<li>
					<a class="clicker">Profile</a>
					<ul>
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Settings</a></li>
						<li><a href="#">Privacy</a></li>
						<li><a href="#">Help</a></li>
						<li><a href="#">Sign out</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- /Clickable Nav -->

Answer 1

查看此修改后的fiddle

我没有时间用它周围的其他元素来测试它，看它是如何表现的。如果仍然给你带来麻烦，可以考虑使用.animate而不是stock slideToggle（）和slideUp（）

jQuery animate

我主要改变了你的标记（而不是ul我选择了div，所以它会为你堆叠）设置底部：绝对ul的100％。希望这能让你朝着正确的方向前进。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Clickable Nav -->
        <div class="click-nav">
            <div class="no-js">
                    <ul>
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                    <a class="clicker">Profile</a>
            </div>
        </div>
        <!-- /Clickable Nav -->

--- --- UPDATE 对于div的滚动，您只需添加下面的不同内容。小提琴中反映的变化：

.click-nav div ul {
    position:absolute;
    bottom:100%;
    list-style:none;
    cursor:pointer;
    max-height: 100px; <--- this (set it to whatever you feel is good.
    overflow-y:scroll; <--- and this (allows div to scroll)
}