1
在我的導航欄中遇到了一些麻煩。出於某種原因，我無法弄清楚，當有人點擊搜索按鈕時，打開的窗口將擴展到窗口邊緣。css＆jquery：打開div展開過去的屏幕邊緣
完整的示例可在這裏：https://codepen.io/NaughtySquid/pen/MEXGpM
下面是完整的代碼，首先將HTML：
<nav class="navigation-main">
<div class="container group">
<div class="right-menu">
<div id="search-button" class="toggle-nav search-box">
<a href="#"><img src="http://worldartsme.com/images/search-button-clipart-1.jpg" width="14" height="14" alt="" /></a>
<div class="toggle-content">
<form method="get" action="{:url}index.php?module=search">
<input type="hidden" name="module" value="search" /> Search <input type="text" class="search-field ays-ignore" name="q" placeholder="Search Articles…" />
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" />
</form>
</div>
</div>
</div>
</div>
</nav>
這裏的CSS：
body {
background: #ffffff;
color: #404040;
font-family: 'Ubuntu', sans-serif;
margin: 47px auto;
padding: 0px;
word-wrap: break-word;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 999;
background-color: #222;
margin: 0 !important;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-search {
padding: 9px 0;
margin-right: 5px;
}
.header-search .search-field {
width: 200px;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
/* toggle menus */
.right-menu{float: right; right: 0px;}
.toggle-content
{
display: none;
white-space: nowrap;
position: absolute;
right: 0;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
word-wrap: normal;
z-index: 999999;
}
.toggle-active {display: block;}
.toggle-content ul
{
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
color: #999;
}
.toggle-content li
{
margin: 0;
padding: 0;
}
.toggle-content a
{
display: block;
color: #999;
padding: 5px
!important;
}
.toggle-content a:hover {color: #fff;}
/* search box */
.search-box {float: left; color: #999; line-height: 29px; background-color: #383838;}
.search-box:hover{background-color: #4B4B4B;}
.search-box a {padding: 10px; height: 29px; display: block; color: #999;}
.search-box:hover{cursor: pointer;}
#search-button .toggle-content {width: 100%; border-top: 1px solid black; text-align: center; left: 0px;}
input, textarea, select {
background: #fcfcfc;
border: 1px solid #ddd;
color: #444444;
margin-bottom: 7px;
padding: 7px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: .2em;
}
最後JQuery的：
$(document).ready(function() {
$(document).on("click", ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this)
.closest(".toggle-nav")
.children(".toggle-content");
if ($toggle.hasClass("toggle-active")) {
$($toggle).removeClass("toggle-active");
} else {
$(".toggle-content").removeClass("toggle-active");
$($toggle).addClass("toggle-active");
}
});
$(document).click(function(e) {
if (
!$(e.target).is("#search-button .toggle-content .search-field") &&
!$(e.target).is("#search-button .toggle-content")
) {
$(".toggle-content").removeClass("toggle-active");
}
});
});
我真的很喜歡內容被屏幕邊緣完美地綁定。
我已經花了最後兩天的時間與Firefox檢查器，切換事情和調整的東西，我只是不能確定什麼是推動它。
它是正確的寬度，該字段爲100％，但你把搜索文本旁邊這麼領域熄滅 – DaFois
如果您刪除「搜索」文本，它仍然擴展到窗口邊緣之外。文本不是問題。 – NaughtySquid
不，如果你刪除輸入的填充 – DaFois