Как ограничить область щелчка текстом?

Question

Первый столбец установлен в display: table, и только текст можно щелкнуть. Именно так и должно быть.

Вторая колонка, однако, (и должна быть, я думаю ...) установлена ​​в display: none, и когда у меня есть разная длина текста (нажмите CCC, чтобы увидеть лучший пример), он создает блок, а вся ширина - кликабельны.

Я думаю, что цвета фона делают проблему очень ясной.

Как исправить это?

В идеале я бы искал исправление CSS. Однако, если это невозможно, и редактирование javascript - это путь ... Я все для этого.

Спасибо.

JSFiddle

HTML

<div id="mainWrapper"> 
<ul id="menu"> 
    <li><a href="#">AAA</a> 
     <ul class="drop"> 
      <li><a href="#">AAAAAAAAAA.1</a> 
       <ul> 
        <li><a href="#">AAA.1-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">AAA.2</a> 
       <ul> 
        <li><a href="#">AAA.2-1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">BBB</a> 
     <ul class="drop"> 
      <li><a href="#">BBBBBBBBBB.1</a> 
       <ul> 
        <li><a href="#">BBB.1-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">BBB.2</a> 
       <ul> 
        <li><a href="#">BBB.2-1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">CCC</a> 
     <ul class="drop"> 
      <li><a href="#">CCCCCCCCCC.1</a> 
       <ul> 
        <li><a href="#">CCC.1-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CCC.2</a> 
       <ul> 
        <li><a href="#">CCC.2-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CCCCC.3</a> 
       <ul> 
        <li><a href="#">CCC.3-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CCC.4</a> 
       <ul> 
        <li><a href="#">CCC.4-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CCC.5</a> 
       <ul> 
        <li><a href="#">CCC.5-1</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CCCCCCCCCCCCCCC.6</a> 
       <ul> 
        <li><a href="#">CCC.6-1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
</div> 

CSS

#mainWrapper{ 
    background-color: #FFFFFF; 
    overflow: hidden; 
    width: 100%; 
    height: 400px; 
    margin: 0; border: 0; padding: 0; 
} 

body{ 
    overflow: hidden; 
    background-color: #FFFFFF; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu { 
    list-style: none; 
    color: #000000; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu a { 
    list-style: none; 
    text-decoration: none; 
    color: #000000; 
} 

ul#menu>li { 
    list-style: none; 
    position: relative; 
    top: 20px; 
    left: 20px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 15px; 
    display: table; 
    background-color: blue; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu>li ul.drop ul { 
    position: absolute; 
    display: none; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu>li ul li { 
    list-style:none; 
    position: relative; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu>li ul.drop { 
    list-style: none; 
    position: fixed; 
    top: 20px; 
    left: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 15px; 
    color: #000000; 
    display: none; 
    background-color: red; 
    margin: 0; border: 0; padding: 0; 
} 

ul#menu>li ul.drop li ul { 
    position: fixed; 
    top: 20px; 
    left: 220px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 15px; 
    color: #000000; 
    background-color: green; 
    display: none; 
} 

JS

$(function(){ 
    $('ul#menu li').on('click', function(){ 
     if($(this).children('.drop').size() > 0) { 
      $("ul.drop").slideUp(); 
      $("ul.drop").find('ul').hide(); 
     } else { 
      } 
    $(this).children('ul').delay(20).slideToggle(600); 
    }); 
}); 
$('ul').on('click', function(e){ 
    e.stopPropagation(); 
}); 

Answer 1

Я только изменил некоторые селекторы и теперь его работу, как вы хотите работать.

$(function(){ 
    $('ul#menu li a, ul#menu li ul li a').on('click', function(){ 
     if($(this).parent().children('.drop').size() > 0) { 
      $("ul.drop").slideUp(); 
      $("ul.drop").find('ul').hide(); 
     } else { 
      } 
    $(this).parent().children('ul').delay(20).slideToggle(600); 
    }); 
}); 
$('ul').on('click', function(e){ 
    e.stopPropagation(); 
}); 

Работа fiddle

Answer 2

Чтобы выделить элемент на втором меню можно добавить CSS, как это:

ul#menu>li ul.drop > li > a{ 
    background: gray; 
} 

, и вы можете видеть, что элемент А не имеют ширина 100%

и если вы хотите, чтобы иметь ширину на 100%:

ul#menu>li ul.drop > li > a{ 
    background: gray; 
    display: block; /* add this line */ 

} 

Answer 3

Эй, у вас есть целая li-tag как oncick-reciever. Если вы хотите только текст, который будет кликабельна вы должны выбрать только A-теги

$(function(){ 
    $('a').on('click', function(){ 
     if($(this).closest('li').children('.drop').size() > 0) { 
      $("ul.drop").slideUp(); 
      $("ul.drop").find('ul').hide(); 
     } else { 
      $(this).closest('li').siblings('li').find('ul').hide();   
      } 
    $(this).closest('li').children('ul') 
    .delay(20).slideToggle(600); 
    }); 
}); 
$('ul').on('click', function(e){e.stopPropagation();}); 

Попробуйте эту скрипку. Он должен работать так, как вы ожидаете. http://jsfiddle.net/lacrioque/84rmsgxc/

Answer 4

Если вы хотите удовлетворить требования только изменением правил CSS. Как насчет этого решения ?:

ul#menu>li ul li { 
    list-style:none; 
    position: relative; 
    margin: 0; border: 0; padding: 0; 

    border: 1px solid black !important; 
    float: left; 
    clear: left; 
} 

jsfiddle

Это модифицированные правила могут ограничить ширину элементов списка, чтобы приспособиться к ширине внутреннего текста, я думаю. Однако это уродливый хак, поэтому я рекомендую модифицировать JavaScript.