открыть меню при щелчке вместо зависания

Мне не удается открыть мое меню в событии клика. Он открывается при наведении курсора мыши. Я знаю, что это очень простой вопрос. Я пытался, но не смог его решить. Мне нужно это для автоматизации с использованием селена, потому что он не захватывает события наведения мыши.открыть меню при щелчке вместо зависания

вы можете просмотреть свой код на https://jsfiddle.net/ansari4all/ssyor80k/

<div align="center" class="action_dropdown_container"> 
    <ul class="action_dropdown"> 
     <li> 
      <a href="">Action</a> 
      <ul> 
       <li> 
        <a href="abc.php">Edit</a> 
       </li> 
       <li> 
        <a href="xyz.php">View</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

ul.action_dropdown { 
    font-family: "titilliumtext22l_ltmedium", sans-serif; 
    font-size: 12px !important; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: absolute; 
} 
ul.action_dropdown li { 
    display: block; 
    position: relative; 
    float: left; 
} 
ul.action_dropdown li ul { 
    display: none; 
} 
ul.action_dropdown li a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    background:#fff url(../../images/xadmin/action_dropdown_arrow.png) no-repeat 42px 6px; 
    border: 1px solid #f1f1f1; 
    line-height:19px; 
    height:19px; 
    padding:0px 12px 0px 5px; 
    text-align:left; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
.action_dropdown_container { 
    width:55px; 
    height:21px; 
} 
.alignmiddle { 
    vertical-align:middle !important; 
} 
ul.action_dropdown li a:hover { 
} 
ul.action_dropdown li ul li a { 
    background:#329ac4 !important; 
    color:#fff; 
} 
ul.action_dropdown li:hover ul { 
    display: block; 
    position: absolute; 
    z-index:999; 
    right: 0px; 
    /*top: -75px;*/ 
} 
ul.action_dropdown li:hover li { 
    float: none; 
    font-size: 11px; 
    margin-top:-1px; 
}

источник

2016-12-10 Juned Ansari

для этого случая вы должны использовать JS. – Jai

Я не думаю, что мы должны использовать js, я уверен, что это возможно с помощью css –

Если вы уверены, то попробуйте что-то, и если вы застряли где-нибудь, укажите точную проблему. – Jai

Вам необходимо сыграть с Ul li и child css. Ul не является дочерним тегом привязки, поэтому вам нужно использовать + для получения следующего брата тега привязки.

Пожалуйста, добавьте этот CSS в код

ul.action_dropdown li > a:focus + ul { 
    display: block; 
    position: absolute; 
    z-index:999; 
    right: 0px; 
    /*top: -75px;*/ 
} 
ul.action_dropdown li > a:focus + ul li { 
    float: none; 
    font-size: 11px; 
    margin-top:-1px; 
}

См action

источник

2016-12-10 13:05:55

Отлично! Выглядит волшебно! – Banzay

, но эта страница обновляется –

Проверьте мою скрипку. Это не освежает. Использовать javascript :(); вместо # в ссылке href вашего якорного тега –

-1

Для clickevents вы могли бы использовать JQuery на вашей странице. Для загрузки проверки JQuery Google или SO, но убедившись, что вы загружаете Jquery до этого вы могли бы сделать что-то вроде:

JQuery:

//start on dom ready 
jQuery(document).ready(function(){ 
//hook on the click event of desired element 
jQuery('.dropdown').click(function(){ 
// toggle is-visible class or something.. 
jQuery('.action_dropdown').toggleClass('is-visible'); 
}); 
});

CSS:

.dropdown { display:none } 
.is-visible {display:block}

источник

2016-12-10 12:30:52 DGRFDSGN

jQuery не требуется. Вы можете сделать это также с помощью простого Javascript. –

Конечно, это возможно во многих отношениях, это одно решение. – DGRFDSGN

Я упомянул об этом, потому что вы написали: «вам нужно будет использовать jQuery», что неверно. Это должно быть «вы могли бы использовать», например. –

-1

Это должно работать:

<div align="center" class="action_dropdown_container" onClick="myfunction()"></div>

Единственное, что вам теперь нужно - это изменить имя функции и Voila!

источник

2016-12-10 12:31:15 CheapGamer

открыть меню при щелчке вместо зависания

ответ

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