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

在使用列表的水平下拉菜单中，我的问题是，下拉菜单及其主选项卡的宽度取决于其内容长度。

见所附图片：


我需要做的是，下拉菜单中的内容包含一个长字或一个小字，标签也必须根据下拉内容的长度进行动态调整，反之亦然。

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

最佳答案

我在Jquery上找到了一个解决方案，而我仍在努力寻找纯CSS选项。

编辑：

我发现您的html中有少量更改的CSS解决方案！

我将您的html li块更改为此：

<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