Nano Hash - криптовалюты, майнинг, программирование

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

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

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

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

JQuery

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

ОБНОВЛЕНИЕ После нескольких часов тестирования я обнаружил, что этот скрипт создал то, что мне было нужно:

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

  • Вы хотите, чтобы окно опускалось при наведении курсора или при нажатии? 11.02.2012
  • Я хочу, чтобы поле опускалось, когда я нажимаю значок. Когда я нажимаю другой значок, первое поле должно скользить вверх, а новое - скользить вниз. 11.02.2012

Ответы:


1

Попробуйте это: 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();
    }
});
11.02.2012
  • как ты умудрился сохранить! ;( JSFiddle не сохраняет для меня. 11.02.2012
  • @czerasz Ваш ответ дает мне эффект наведения, я просил функцию наведения, которая выводит мне поле, которое будет видно, пока я снова не нажму на тот же значок или другой значок :) 11.02.2012

    • 2

    Я предполагаю, что проблема, с которой вы столкнулись, заключается в том, что когда вы переходите от значка к меню, меню исчезает, потому что событие «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. Разве у вас не должно быть по одному на иконку?

    11.02.2012
  • Омар: Я не хотел беспокоить вас всем кодом. Скрипт важнее всего, CSS здесь вторичен. 11.02.2012
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..