css & jquery：打开的 div 扩展过去的屏幕边缘

Posted 2023-03-28

技术标签:

【中文标题】css & jquery：打开的 div 扩展过去的屏幕边缘【英文标题】：css & jquery: opened div expands past screen edges 【发布时间】：2018-03-23 06:51:15 【问题描述】：

我的导航栏有点麻烦。出于某种我无法弄清楚的原因，当有人单击搜索按钮时打开的框超出了窗口边缘。

此处提供完整示例：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"    /></a>
        <div class="toggle-content">
          <form method="get" action=":urlindex.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-menufloat: 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:hoverbackground-color: #4B4B4B;
.search-box a padding: 10px; height: 29px; display: block; color: #999;
.search-box:hovercursor: 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% 但是您将搜索文本放在它旁边，所以字段会消失如果您删除“搜索”文本，它仍会扩展超出窗口边缘。文字不是问题。不，如果您删除输入的填充 <div class="toggle-content toggle-active"> 这个元素四周有 5px 的内边距看我的回答，我放了 width: calc(100% - 80px) - 80px 或多或少是搜索词的宽度... 【参考方案1】：

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

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

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

【讨论】：

【参考方案2】：

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

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-menufloat: 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:hoverbackground-color: #4B4B4B;
.search-box a padding: 10px; height: 29px; display: block; color: #999;
.search-box:hovercursor: 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;

<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"    /></a>
        <div class="toggle-content">
          <form method="get" action=":urlindex.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>

【讨论】：

你能解释一下你改变了什么吗？我放了 width: calc(100% - 80px) ... 80px 或多或少是搜索词的宽度【参考方案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 & jquery：打开的 div 扩展过去的屏幕边缘的主要内容，如果未能解决你的问题，请参考以下文章

HTML&javaSkcript&CSS&jQuery&ajax

jQuery & CSS - 移除/添加显示：无

jQuery设置CSS背景不透明度

jQuery代码不改变CSS

CSS & jQuery 中的选择器：只是类/id，还是标签？

在 CSS 选择器中使用 & [关闭]