Как отключить выпадающий список многоуровневой начальной загрузки?

#html #twitter-bootstrap

#HTML #twitter-bootstrap

Вопрос:

Я хочу, чтобы пользователь мог выбирать все в рамках морфологического преобразования (размывание, расширение, открытие, закрытие), но не само «морфологическое преобразование». Спасибо за каждый ответ!

введите описание изображения здесь

HTML-код:

 <div class="container">
<div class="row">
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Select Pre-Processing Method <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Normalisation</a></li>
          <li><a href="#">Canny Edge Detection</a></li>
          <li><a href="#">Smoothing</a></li>
          <li><a href="#"></a></li>
          <li class="divider"></li>

 ... 
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Morphological Transformation</a>
            <ul class="dropdown-menu">
              <li><a>Erosion</a></li>
              <li><a>Dilation</a></li>
              <li><a>Opening</a></li>
              <li><a>Closing</a></li>
            </ul>
          </li>

  ...


            </ul>
          </li> 
        </ul>
    </div>
</div>
  

Комментарии:

1. Рассматривали ли вы возможность добавления .disabled к li элементу? getbootstrap.com/components/#dropdowns-disabled

2. Я пробовал это, но это не сработало, потому что пользователям I нужно иметь возможность щелкнуть по нему, чтобы отобразить подменю. В любом случае спасибо.

Ответ №1:

Вы можете отключить привязку событий и сохранить эффекты наведения, используя это:

 .disabled-link:hover{
   background: red;
}

.disabled-link:active{
   pointer-events: none;
}  
 <a href="www.google.com" class="disabled-link">Test</a>  

Его можно использовать во всех современных браузерах: нажмите!