JQuery Dropdown с помощью JQuery Dummy

Question

JQuery Dropdown с помощью JQuery Dummy

0

function rightFrame(e) {
    $('#' + e).css({
        'position': 'relative',
        'top': '0px',
        'left': '30px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.link').mouseover(function(e) {
        rightFrame($(this).data('item'));
    });
    $('.link').mouseout(function(e) {
        if ($(this).is(":visible") == true) {
            if ($(this).is(':hover') == true) {
                $('.right').hide();
            }
        }
    });
});

Хорошо, только чтобы квалифицироваться здесь, я практически ничего не знаю о jQuery или JavaScript. Я начал с базового кода, чтобы ящик с раскрывающимся списком появлялся, а затем возился с ним, чтобы сделать его таким, каким он есть. Моя цель состоит в том, чтобы выпадающее меню появлялось, когда вы наводили курсор мыши на ссылку, но при этом позволяете вам щелкнуть по выпадающему списку, так как выпадающая навигация должна. Но, как я уже сказал, я вроде как манекен, когда речь заходит о jQuery/JS. Помогите!

PS - Ссылка ссылается на ссылку, которую вы наводите, чтобы выпадающее меню появилось. Правило относится к самому выпадающему меню.

<div id="leftcontent">
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r1">HOME<br /><span class="littlelink">THE HOMEPAGE</span></div></a>
        <a href="#"><div class="right" id="r1">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r2">PORTFOLIO<br /><span class="littlelink">SOME OF MY WORK</span></div></a>
        <a href="#"><div class="right" id="r2">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r3">PRICES<br /><span class="littlelink">YOUR INVESTMENT</span></div></a>
        <a href="#"><div class="right" id="r3">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r4">CONTACT<br /><span class="littlelink">GET IN TOUCH</span></div></a>
        <a href="#"><div class="right" id="r4">asdf</div></a>
    <hr size="1" color="#555" />
</div><!-- end leftcontent -->

Kelly Goeken 21 сен. 2013, в 11:24

Источник

Теги:

jquery

html

2 ответа

0

иногда мышь не запускается правильно, поэтому просто используйте slideToggle(); fadeToggle();

$(document).ready(function() {
    $('.link').mouseover(function(e) {
    //$(this).closest('a').next('a').find('.right').fadeToggle(400); //ITS FOR YOUR OLD HTML
             $(this).find('.right').slideToggle(400);
            //above 50 is speed of animation
    });

});

используйте этот html для выпадающего меню

<ul>
    <li class="link">
        <a href="#">Link....</a>
        <ul class="right">
            <li><a href="#">Sublink-1</a></li>
        </ul>
    </li>
</ul>

Rameez SOOMRO 21 сен. 2013, в 07:14

0

Я не уверен, что это то, что я ищу. Я хочу, чтобы выпадающий список оставался на неопределенный срок до тех пор, пока он больше не зависает. Разве это не заставит его исчезнуть через некоторое время?
Kelly Goeken 21 сен. 2013, в 09:15
0

сейчас проверь это ...
Rameez SOOMRO 21 сен. 2013, в 09:28

Ещё вопросы

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

Amir Hoseinian · Accepted Answer · 2013-09-21T06-36-00.000Z

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

поэтому для вашей проблемы я бы предложил

<div class="link"> 
    <a href="..."> ... </a>
    <div class="right">
         <a href="..."> ... </a>
    </div>
</div>

О Конечно! Да, это было именно то, что мне было нужно. Спасибо!