リストアイテム内の<a>タグ内にスパンを配置するにはどうすればよいですか？

Question

私はモバイルメニューのハイパーリンクをコンテナの全幅に届かせようとしていますが、サブメニューボタンは親リスト項目の右側に置くことができます。現時点では、親リンク上のパディングをサブメニューボタンの端に達するように設定できますが、サブメニューボタンのないリンクはクリックできない右側にギャップがあります。容器の全幅とする。

私が試してみて、これは私が全幅にパディングを設定することができるようになると考え、li aにボタンを挿入するために.insertBeforeから.appendするためにJavaScriptを変更しようとしたが、これは働いていません。

リンゴのタッチスクリーンデバイスでリンクをクリックするとリンクが灰色のオーバーレイになり、最後に隙間があると奇妙に見えるため、これは主に表面的な問題です。私はフィドル作った

からhttps://jsfiddle.net/8nj5y4t1/39/

は私の説明を簡単にするためには、私が達成しようとしていることは、オレンジulメニューの全範囲をカバーするためにピンクのハイパーリンクを取得することです。 100％にnav.main-menu#mobile ul li aルール幅がそれらをliの幅を埋める行い、submenu-buttonにposition: absoluteを与える設定

Answer 1

は、その右の位置にあるものを

ノート、絶対的な位置付けボタンの親（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>