javascript - 弹出而不是向下

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 而不是常用的 slideToggle() 和 slideUp()

jQuery animate

我主要更改了您的标记(我选择了 div 而不是 ul，因此它会为您堆叠)设置底部:绝对 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 -->

---更新---对于 div 的滚动，您只需在下面添加不同的内容。 fiddle 中反射(reflect)的变化:

.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)
}