Как сделать меню доступным только при условии соблюдения определенного условия?

Как сделать меню доступным или доступным при определенных условиях? в этом случае я хочу меню только интерактивными или Выбрасывается, когда кнопка нажатаКак сделать меню доступным только при условии соблюдения определенного условия?

ul {list-style: none;padding: 0px;margin: 0px;} 
 
ul li {display: block;position: relative;float: left;border:1px solid #000} 
 
li ul {display: none;} 
 
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
 
    white-space: nowrap;color: #fff;} 
 
ul li a:hover {background: #f00;} 
 
li:hover ul {display: block; position: absolute;} 
 
li:hover li {float: none;} 
 
li:hover a {background: #f00;} 
 
li:hover li a:hover {background: #000;} 
 
#drop-nav li ul li {border-top: 0px;}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="try.css"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
<ul id="drop-nav"> 
 
    <li><a href="#">Content Management</a> 
 
     <ul> 
 
      <li><a href="#">Joomla</a></li> 
 
      <li><a href="#">Drupal</a></li> 
 
      <li><a href="#">WordPress</a></li> 
 
      <li><a href="#">Concrete 5</a></li> 
 
     </ul> 
 
    </li> 
 
</ul><br><br><br> 
 
<button>Click me</button> 
 
</body> 
 
</html>

источник

2015-08-25 Nerd Frost

, что вы имеете в виду Clickable ... есть ли нажмите обработчиков, добавленных к ним ... или вы хотите, чтобы выпадающее меню появлялось только после нажатия кнопки –

Одним из решений является использование дополнительного правила класса для висения (для выпадающего списка), и добавить класс на кнопку ul при нажатии кнопки.

Для обработчиков Нажмите также, вы можете сделать то же самое, чтобы увидеть, есть ли ul дэ Clicked класс

$('#clickme').click(function(){ 
 
    $('#drop-nav').addClass('clicked') 
 
})

ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    border: 1px solid #000 
 
} 
 
li ul { 
 
    display: none; 
 
} 
 
ul li a { 
 
    display: block; 
 
    background: #000; 
 
    padding: 5px 10px 5px 10px; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
} 
 
#drop-nav.clicked li a:hover { 
 
    background: #f00; 
 
} 
 
#drop-nav.clicked li:hover ul { 
 
    display: block; 
 
    position: absolute; 
 
} 
 
#drop-nav.clicked li:hover li { 
 
    float: none; 
 
} 
 
#drop-nav.clicked li:hover a { 
 
    background: #f00; 
 
} 
 
#drop-nav.clicked li:hover li a:hover { 
 
    background: #000; 
 
} 
 
#drop-nav.clicked li ul li { 
 
    border-top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="drop-nav"> 
 
    <li><a href="#">Content Management</a> 
 
     <ul> 
 
      <li><a href="#">Joomla</a></li> 
 
      <li><a href="#">Drupal</a></li> 
 
      <li><a href="#">WordPress</a></li> 
 
      <li><a href="#">Concrete 5</a></li> 
 
     </ul> 
 
    </li> 
 
</ul><br><br><br> 
 
<button id="clickme">Click me</button>

источник

2015-08-25 04:26:10

Как сделать меню доступным только при условии соблюдения определенного условия?

ответ

Смежные вопросы