Question

I'm trying to get the hyperlinks in my mobile menu to reach the whole width of the container, whilst allowing the submenu buttons to sit beside the parent list items on the right hand side. At the moment I am able to set the padding on the parent links so that they reach the edge of the submenu button, however the links without submenu buttons have a gap on the right hand side that isn't clickable, whereas I want it to be the full width of the container.

I've tried to change the javascript from .insertBefore to .append to try and insert the buttons into the li a, thinking that this would allow me to set the padding to full width, but this hasn't worked.

This is largely a cosmetic issue, because the links have a grey overlay when pressed on an apple touch screen device, and it looks strange when there's a gap at the end.

I've made a 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它的正确位置

请注意，绝对定位按钮的父级（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 {}才能使按钮保留在其中。

这是update of your fiddle

＆＃13;

<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>

＆＃13;

post

＆＃13;

void* producerFunc(void* arg)
{
    while(n_insertions < N_PRODUCTS)
    {
        sem_wait(&sem_postAvaliable);
        sem_wait(&mutex);
        //Insert Item
        sem_post(&mutex);
        sem_post(&sem_posTaken);
    }
    pthread_exit(NULL);
}

void* consumerFunc(void* arg)
{
    while(n_consumed < N_PRODUCTS)
    {
        sem_wait(&sem_posTaken);
        sem_wait(&mutex);
        //Remove from bufer
        sem_post(&mutex);
        sem_post(&sem_postAvaliable);
    }
    pthread_exit(NULL);
}

＆＃13;

我怎样才能在<a> tag within a list item?

1 个答案: