jquery - 如何让 span 位于列表项中的 <a> 标记内？

Question

我试图让我的移动菜单中的超链接达到容器的整个宽度，同时允许子菜单按钮位于右侧的父列表项旁边。目前我可以在父链接上设置填充，使它们到达子菜单按钮的边缘，但是没有子菜单按钮的链接在右侧有一个不可点击的间隙，而我希望它是容器的全宽。

我试图将 javascript 从 .insertBefore 更改为 .append 以尝试将按钮插入 li a，思考这将允许我将填充设置为全宽，但这没有用。

这主要是一个外观问题，因为在 Apple 触摸屏设备上按下链接时会覆盖灰色，如果末尾有空隙，看起来会很奇怪。

我做了一把 fiddle – https://jsfiddle.net/8nj5y4t1/39/

为了简化我的解释，我想要实现的是让粉红色超链接覆盖橙色 ul 菜单的整个范围。

Answer 1

将 nav.main-menu#mobile ul li a 规则宽度设置为 100% 将使它们填充 li 的宽度，并赋予 submenu-button position: absolute 会将它们放在正确的位置

请注意，绝对定位按钮的父级(li)需要有 position: relative 按钮才能留在其中。

这是一个 update of your fiddle

jQuery(document).ready(function($) {

  $('<span class="submenu-button">+</span>').insertBefore('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li');

  $('.submenu-button').click(function() {
    $(this).toggleClass('open');
    $(this).next().toggleClass('open').children('li').toggleClass('open');

  });

});

nav.main-menu#mobile {
  min-width: 300px;
  max-width: 400px;
}

nav.main-menu#mobile ul {
  position: relative;
  overflow: auto;
  margin: 0;
  padding: 0;
  background-color: orange;
}

nav.main-menu#mobile ul li {
  display: inline-block;
  position: relative;
  float: left;
  width: 100%;
  overflow-x: hidden;
}

nav.main-menu#mobile ul li a {
  display: inline-block;
  height: auto;
  width: 100%;
  padding: 15px 0px 15px 30px;
  font-family: Open Sans, Helvetica;
  font-size: 18px;
  background-color: pink;
  color: purple;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
}

.submenu-button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-color: blue;
  color: white;
  padding: 15px 20px 15px 20px;
}

nav.main-menu#mobile ul ul {
  max-height: 0;
  width: 100%;
  transition: all 800ms;
  overflow: hidden;
}

nav.main-menu#mobile ul ul.open {
  max-height: 1000px;
}

nav.main-menu#mobile ul ul li {
  transition: 2s;
}

nav.main-menu#mobile ul ul li a {
  transition: 2s;
  background-color: purple;
  color: yellow;
}

nav.main-menu#mobile ul ul li a.open {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu" id="mobile">
  <div class="menu-header-menu-container">
    <ul id="menu-header-menu-1" class="menu">
      <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://www.mywebsite.com">Link 1</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"><a href="http://www.mywebsite.comwork/">Link 2</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.comwork/landscapes/">Sublink 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.mywebsite.comwork/seascapes/">Sublink 2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.comwork/macro/">Sublink 3</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.comwork/cities/">Sublink 4</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-475"><a href="http://www.mywebsite.comwork/long-exposure/">Sublink 5</a>
            <ul class="sub-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.comwork/miscellaneous/">Sublink 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">Link 3</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.lucieaverillphotography.co.uk/shop/">Link 4</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.lucieaverillphotography.co.uk/contact/">Link 5</a></li>
    </ul>
  </div>
</nav>