JQuery: Нажмите на изображение, чтобы показать div ниже в виде поля - PullRequest
Новая
       14

JQuery: Нажмите на изображение, чтобы показать div ниже в виде поля

0 голосов
/ 11 февраля 2012

Что у меня есть: У меня есть три иконки, плавающие рядом друг с другом. При наведении курсора на один из значков под значком появляется поле фиксированного размера. Внутри коробки есть ссылки.

Что я хочу: Я хочу, чтобы окно оставалось открытым после того, как я щелкну значок и / или мышку. Я хочу, чтобы окно закрывалось всякий раз, когда я снова щелкаю по значку или когда щелкаю по другому значку (который, в свою очередь, открывает новое поле для данного значка).

Мне нужна помощь с: Мне нужна помощь с настройкой / изменением сценария, который я сейчас использую для эффекта наведения мыши. Кто-нибудь?

JQuery 

$(document).ready(function() {
    $("#fb-icon").hover( function() {
        $("#fb-icon-content").css('display','block');
    }, function() {
        $("#fb-icon-content").hide();
    });
});

UPDATE После нескольких часов тестирования я обнаружил, что этот скрипт создал то, что мне нужно: 

$('#expand-facebook').click(function() {
$('#facebook-expanded').toggle('slow', function() {
}); });

Ответы [ 2 ]

1 голос
/ 11 февраля 2012

Попробуйте: http://jsfiddle.net/8T8sA/

HTML: 

<ul>
    <li class="ico"></li>
    <li class="ico"></li>
    <li class="ico"></li>
</ul>

<div id="fb-icon-content">some content</div>

CSS: 

ul {
    list-style:none;
}
.ico {
    margin-left:50px;
    width:32px; height:32px;
    float:left;
    border:1px solid red;
}

#fb-icon-content {
    position:fixed;
    border:1px solid red;
    display:none;
}

JS: 

var shown = false;

$(".ico").hover( function() {
    if ( shown === false ) {
        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
}, function() {
    if ( shown === false ) {   
        $("#fb-icon-content").hide();
    }
}).bind('click', function() {
    var tooltipElement = $("#fb-icon-content"),
        that = $(this);

    if ( shown === that.index() ) {
        tooltipElement.hide();
        shown = false;
    } else {
        shown = $(this).index();

        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
});
0 голосов
/ 11 февраля 2012

Полагаю, проблема в том, что когда вы выходите из значка в меню, меню исчезает, потому что событие "unhover" запускается на # fb-icon?

Вы можетесделать это: 

$(document).ready(function() { 
    // to show when clicked
    $("#fb-icon").click( function() { 
        // hide the previously opened content
        if (window.lastContent != null )
            window.lastContent.css('display','none'); 

        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    });
    // show the icon content when hover on the icon
    $("#fb-icon").hover( function() { 
        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    }); 
});

Однако, похоже, у вас есть только один # fb-icon-content.Разве вы не должны иметь один на иконку?

...