Question

我的导航栏遇到了一些麻烦。由于某种原因，我无法弄清楚，当有人点击搜索按钮时打开的框会扩展到窗口边缘。

此处提供完整示例：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检查员一起度过了一段时间，把事情搞砸了，调整了一些东西，我就无法确定推出它的方法。

Answer 1

使用以下CSS来修复指定框的溢出：

max-width: 您选择的宽度（以像素为单位） ;

这不应该让框扩展超过窗口的宽度。

Answer 2

＆＃13;

$(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");
    }
  });
});

＆＃13;

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: calc(100% - 80px);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: .2em;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

请参阅此笔https://codepen.io/anon/pen/PJaajr

我添加了以下内容：

.toggle-content {box-sizing: border-box;}

并将搜索标签包裹在范围

中

<span class="search-label">Search</span>

然后添加了css来设计它

.search-label {
  width:60px;
  display:inline-block;
}

然后改变了

的宽度

input, textarea, select {width: calc(100% - 64px);/*additional 4px to account for whitespace*/}

css＆amp; jquery：打开的div扩展了屏幕边缘

3 个答案: