javascript - 根据内容长度将选项卡或下拉菜单调整为相同的宽度

Question

在使用列表的水平下拉菜单中，我的问题是下拉菜单及其主选项卡根据其内容长度具有不同的宽度。

见附图:

我需要做的是下拉列表中的内容有长单词或小单词，选项卡还必须根据下拉内容长度动态调整，反之亦然。

$("li.dropdown a").hover(function () {
      $(this).parent().toggleClass('zclass');
    });
    $("li.dropdown:before").hover(function () {
      $(this).parent().toggleClass('zclass');
    });
    $(".dropdown-content").hover(function () {
      $(this).parent().toggleClass('zclass');
    });

#other-menu {width:850px; background-color:#eee;}
#other-menu li{ list-style:none; float:left; padding:10px;}
li a, .dropbtn {
    display: block;
    color: #828282;
    text-decoration: none;
}

li.dropdown {
    display: block;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
     position:relative; 
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100%;
    white-space: nowrap;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999999;
    padding: 5px 7px;
    margin-top: 15px;
    margin-left: -9px;
    height: auto;
    top: 25px;
    font-family: 'Fira-Sans-Semibold', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;s
}
.dropdown > .dropdown-content a {
    padding: 3px 6px;
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
}

.zclass {
  z-index: 200;
}

.dropdown > .dropdown-content a:hover,.dropdown > .dropdown-content a:focus { color:#5A5A5A !important; text-decoration: none;}

.dropdown:hover:before {
  min-width: 100%;
  height: 50px;
  content:''; 
   position:absolute; /* set styling box to be absolute position to not affect parent */
   z-index:-1; /* set it behind the parent */
   /*copy the properties the parent had*/
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

    /* use positioning to grow its size in relation to parent */
    top:-5px;
    bottom:-5px;
    left:0;
    right:-15px;


    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background: #fff;
    border: 1px solid #eeeeee;
  }
.dropdown a:hover {
  text-decoration: none; color: #828282 !important; 
}

.dropdown:hover .dropdown-content {
    display: block;
}


#other-menu {
  z-index: 2000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="other-menu" class="hidden-xs">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropbtn"  href="#">News</a>
      <div class="dropdown-content">
        <a href="#">national</a>
        <a href="#">international</a>
        <a href="#">states</a>
        <a href="#">cities</a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">opinion</a>
      <div class="dropdown-content">
        <a href="#">cartoon </a>
        <a href="#">columns </a>
        <a href="#">editorial  </a>
        <a href="#">interview </a>
        <a href="#">lead </a>
        <a href="#">letters </a>
        <a href="#">States  </a>
        <a href="#">cities </a>
        <a href="#">National </a>
        <a href="#">International </a>
        <a href="#">States  </a>
        <a href="#">cities </a>
        <a href="#">National </a>
        <a href="#">International </a>
        <a href="#">States  </a>
        <a href="#">cities </a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">States</a>
      <div class="dropdown-content">
        <a href="#">Tamil Nadu</a>
        <a href="#">Andha</a>
        <a href="#">Kerala</a>
        <a href="#">Thiruvananthapuram</a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">Cities</a>
      <div class="dropdown-content">
        <a href="#">Tamil Nadu</a>
        <a href="#">Andha</a>
        <a href="#">Kerala</a>
        <a href="#">Karnataka</a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">World</a>
      <div class="dropdown-content">
        <a href="#">Tamil Nadu</a>
        <a href="#">Andha</a>
        <a href="#">Kerala</a>
        <a href="#">Karnataka</a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">Opinion</a>
      <div class="dropdown-content">
        <a href="#">Tamil Nadu</a>
        <a href="#">Andha</a>
        <a href="#">Kerala</a>
        <a href="#">Karnataka</a>
      </div>
    </li>
    <li class="dropdown">
      <a class="dropbtn" href="#">Life &amp; Style</a><div class="dropdown-content">
      <a href="#">Tamil Nadu</a>
      <a href="#">Andha</a>
      <a href="#">Kerala</a>
      <a href="#">Karnataka</a>
    </div></li>
    <li class="dropdown">
      <a class="dropbtn" href="#">Entertainment</a><div class="dropdown-content">
      <a href="#">Tamil Nadu</a>
      <a href="#">Andha</a>
      <a href="#">Kerala</a>
      <a href="#">Karnataka</a>
    </div></li>
    <li class="dropdown">
      <a class="dropbtn" href="#">EBusiness</a><div class="dropdown-content">
      <a href="#">Tamil Nadu</a>
      <a href="#">Andha</a>
      <a href="#">Kerala</a>
      <a href="#">Karnataka</a>
    </div></li>
    <li class="dropdown">
      <a class="dropbtn" href="#">ESport</a><div class="dropdown-content">
      <a href="#">Tamil Nadu</a>
      <a href="#">Andha</a>
      <a href="#">Kerala</a>
      <a href="#">Karnataka</a>
    </div>
    </li>
  </ul>

<强> Fiddle demo

Answer 1

我正在寻找基于 Jquery 的解决方案，并且我仍在努力寻找纯 Css 选项。

编辑:

我找到了一个 CSS 解决方案，只需对 html 进行一些小改动即可!

我将您的 html li block 更改为:

<li class="dropdown">
  <div class="holder">
    <a class="dropbtn"  href="#">News</a>
    <div class="dropdown-content">
      <a href="#">national</a>
      <a href="#">international</a>
      <a href="#">states</a>
      <a href="#">cities</a>
    </div>
  </div>
</li>

并将你的CSS更改为:

#other-menu { 
  display: flex;
  width:850px; 
  background-color:#eee;
}

#other-menu li { 
  list-style:none;
}

li a, .dropbtn {
    display: block;
    color: #828282;
    text-decoration: none;
}

.dropbtn {
  padding: 10px;
  white-space: nowrap;
}

.dropdown {
  position: relative;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: #fff;
    min-width: 100%;
    white-space: nowrap;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999999;
    padding: 5px 0;
    height: auto;
    top: 0px;
    font-family: 'Fira-Sans-Semibold', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;s
}
.holder > .dropdown-content a {
    padding: 3px 6px;
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
}

.zclass {
  z-index: 200;
}

.holder > .dropdown-content a:hover,.dropdown > .dropdown-content a:focus { color:#5A5A5A !important; text-decoration: none;}

.holder:hover {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.holder a:hover {
  text-decoration: none; color: #828282 !important; 
}

.holder:hover .dropdown-content {
    display: block;
}

#other-menu {
  z-index: 2000;
}

<强> Css Fiddle demo

<小时/>

这是获取下拉列表宽度并将其插入最近的选项卡(父选项卡)的示例，请查看。

我的 Jquery 选项:

$(function(){
    $('.dropdown-content').each(function(){
    var dropdownWidht = $(this).width();
    $(this)
    .closest('.dropdown')
    .find('.dropbtn')
    .css('width', dropdownWidht);
  })
})

<强> Jquery Fiddle demo