нажмите показать выпадающее меню

0

Я работаю в стиле facebook в выпадающем меню hover. Я думаю, что все правильно, но меню наведения не открывается, когда я нажимаю меню. знаю, что мне что-то не хватает, но я не видел, что делаю. Спасибо заранее за вашу помощь. Что мне нужно, чтобы щелкнуть по меню для открытия

Демо- версия JsFiddle

Я использую его в своем рабочем html-коде:

<div class="container">
    <div class="pay_ayar">
        <a class="account"></a>
        <div class="bubble">
            <ul class="root">
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
        </div>
    </div>
</div>

также я использую его в своей работе. CSS-код:

.container {
   float:left;
    width:500px;
    height:90px;
    border:1px solid #000;   
}
.pay_ayar {
    float:right;
    width:20px;
    height:25px;
    border:1px solid #000;
    display:none;
}
.container:hover .pay_ayar{
     display:block;
}
a.account{
    position:absolute;
    line-height:25px;
    width:20px;
    height:25px;
    cursor:pointer; 
    display:block;
}
.bubble{
   float:left;
    position:relative;
    width:250px;
    height:200px;
    padding:0px;
    border:1px solid #000;
    margin-top:0px;
    display:none;

}
.pay_ayar.open .account { 
                cursor: pointer;
                width: auto;
                display: inline-block;
                padding-left: 7px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 22px;
                border: 1px solid #AAA;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                font-weight: bold;
                color: #717780;
                line-height: 16px;
                text-decoration: none !important;
                background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .pay_ayar.open .account {
                border: 1px solid #3B5998;
                color: white;
                background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
                -moz-border-radius-topleft: 2px;
                -moz-border-radius-topright: 2px;
                -moz-border-radius-bottomright: 0px;
                -moz-border-radius-bottomleft: 0px;
                -webkit-border-radius: 2px 2px 0px 0px;
                border-radius: 2px 2px 0px 0px;
                border-bottom-color: #6D84B4;
            }
Показать ещё 1 комментарий

3 ответа

3

Вам нужно включить демонстрацию библиотеки jquery.

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>
  • 2
    Почему проголосовали? Он прекрасно работает с библиотекой jquery !! ... +1
  • 0
    Да, это работает хорошо, я не понизил
2

Вам просто нужно включить jQuery, выбрав jQuery версию из вкладки " Frameworks and Extensions " jsFiddle

Обновленный скрипт

1

Вам нужно включить библиотеку jquery, не использовать атрибуты типа для таблиц стилей (если не использовать CSS) и скрипты (если не использовать JavaScript).

Указание атрибутов типа в этих контекстах не требуется, поскольку HTML5 подразумевает, что text/css и text/javascript являются значениями по умолчанию. Это можно сделать безопасно даже для старых браузеров.

HTML

 <script src='http://code.jquery.com/jquery.js'><\script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню