JQuery отключить парение с щелчком - PullRequest
Новая
       13

JQuery отключить парение с щелчком

2 голосов
/ 19 января 2012

У меня есть код jQuery, который работает, так как я ожидаю, что он будет работать до определенного момента. Здесь - это скрипка

Три элемента меню, при наведении на них, в желтом поле появляется черный квадрат и дополнительная информация.При нажатии на меню 1 и 3, зеленый круг появляется перед меню.При нажатии на меню 2 появляется панель поиска, которая фокусируется с небольшой задержкой.

До этого момента все в порядке.

То, что я хочу, например:

-при щелчке 'menu_item'_2, и я убираю мышь над другим элементом, в желтом поле' info_2 'должно быть показано.

Так что я должен как-то отбросить наведение после того, как был сделан щелчок.И когда я щелкаю другой элемент menu_item, он должен показывать соответствующую информацию в желтом поле.

Я не специалист по jQuery, поэтому, возможно, код должен быть выполнен другим способом.

В любом случае, спасибо за вашу помощь! 

$(function() {

$("#search").hover( 
    function() {
        $("#search_info").show();
        $("#arrow").show().css('top', 230);
        $("#fade_search").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #search_info").hide();
        $("#fade_search").animate({ opacity: 1},50);       
    }).click(function(e) { 
             $("#activated").show().css('top', 232);
             var focusDelay = $("input[type=text]").fadeIn(100);            
                 setTimeout(function(){
                     $(focusDelay).focus();
                 },1000);
             e.preventDefault();
            });

$("#list").hover( 
    function() {
        $("#list_info").show();
        $("#arrow").show().css('top', 205);
        $("#fade_list").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #list_info").hide();
        $("#fade_list").animate({ opacity: 1},50);

    }).click(function(e) {  show up
             $("#activated").show().css('top', 209 );
             e.preventDefault();
            });

$("#program").hover( 
    function() {
          $("#program_info").show();
          $("#arrow").show().css('top', 255);
          $("#fade_program").animate({ opacity: 0.4},50);
      },
    function() {
          $("#arrow, #program_info").hide();
          $("#fade_program").animate({ opacity: 1},50);

    }).click(function(e) {
             $("#activated").show().css('top', 261 );
             e.preventDefault();
             });
});

Ответы [ 3 ]

2 голосов
/ 20 января 2012

Я изменил весь ваш код jQuery. Смотрите этот jsFiddle для переделки: http://jsfiddle.net/jUHNF/8/

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

    else {
        $("input[type=text]").hide();
    }

Сам код должен быть довольно хорошо прокомментирован (возможно, слишком хорошо).

Как вы можете видеть, я переместил все функции в ОДИН режим наведения / нажатия вместо того, чтобы превращать их в отдельные события в зависимости от того, по какому пункту меню вы щелкнули. Идея здесь состоит в том, чтобы держать его в чистоте и простоте.

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

Редактировать: Вставка кода jsFiddle для дальнейшего использования. 

    <div id="container">
        <div id="modes">
            <div class="elements" id="list">
                <a href="">menu_item_1</a>
            </div>
            <div class="elements" id="search">
                <a class="link" href="">menu_item_2</a>
            </div>
            <div class="elements" id="program">
                <a href="">menu_item_3</a>
            </div>
        </div>
        <div id="infobox">
            <p id="list_info" class="infobox">
                info_1
            </p>
            <p id="search_info"class="infobox">
                info_2
            </p>
            <p id="program_info"class="infobox">
                info_3
            </p>
        <form method="post" action=""></form>
            <input type="text" name="search_field"
            placeholder="type here" />
        </form>
        </div>
        <div id="arrow"></div>
        <div id="activated"></div>
    </div>

JS: 

$(function() {
    $(".elements").mouseover(
        function() {
            activateMenuItem($(this));
        }
    ).click(function(e) {
        var bulletTop = $(this).position().top + 207; 
        $("#activated").show().css("top", bulletTop);

        //turn off the hover function for all menu items
        $(".elements").off("hover"); 

        if($(this).attr("id") == "search") {
             var focusDelay = $("input[type=text]").fadeIn(100);            
             setTimeout(function(){
                 $(focusDelay).focus();
             },1000);
        }else {
            $("input[type=text]").hide();
        }
        activateMenuItem($(this)); //do same as on hover
        e.preventDefault();
    });

    function activateMenuItem(item) {
            var arrowTop = item.position().top + 205;
            var boxName = "#" + item.attr("id") + "_info";              
            $("#arrow").show().css("top", arrowTop);
            $(".infobox").hide();
            $(boxName).show();
    }
});
0 голосов
/ 20 января 2012
0 голосов
/ 20 января 2012

попробуйте это: 

$(function() {
    $("#search").hover( //hover over search triggers info and arrow to show up
    function() {
        $("#search_info").show();
        $("#arrow").show().css('top', 230);
        $("#fade_search").animate({
            opacity: 0.4
        },
        50);
    },
    function() {
        if (!$(this).hasClass('activated')) {
            $("#arrow, #search_info").hide();
        }
        $("#fade_search").animate({
            opacity: 1
        },
        50);
    }).click(function(e) { //click on search triggers search box and activated button to show up
        $('.elements').removeClass('activated');
        $(this).addClass('activated');
        $("#activated").show().css('top', 232);
        var focusDelay = $("input[type=text]").fadeIn(100);
        setTimeout(function() {
            $(focusDelay).focus();
        },
        1000);
        e.preventDefault();
    });
    $("#list").hover( //hover over list triggers info and arrow to show up
    function() {
        $("#list_info").show();
        $("#arrow").show().css('top', 205);
        $("#fade_list").animate({
            opacity: 0.4
        },
        50);
    },
    function() {
        if (!$(this).hasClass('activated')) {
            $("#arrow, #list_info").hide();
        }
        $("#fade_list").animate({
            opacity: 1
        },
        50);
    }).click(function(e) { //click on list triggers search box and activated button to show up
        $('.elements').removeClass('activated');
        $(this).addClass('activated');
        $("#activated").show().css('top', 209);
        e.preventDefault();
    });
    $("#program").hover( //hover over program triggers info and arrow to show up
    function() {
        $("#program_info").show();
        $("#arrow").show().css('top', 255);
        $("#fade_program").animate({
            opacity: 0.4
        },
        50);
    },
    function() {
        if (!$(this).hasClass('activated')) {
            $("#arrow, #program_info").hide();
        }
        $("#fade_program").animate({
            opacity: 1
        },
        50);
    }).click(function(e) {
        $('.elements').removeClass('activated');
        $(this).addClass('activated');
        $("#activated").show().css('top', 261);
        e.preventDefault();
    });
});
$('.elements').click(function(e) {
    if ($(this).hasClass('activated')) {
        var i = $(e.currentTarget).index();
        $('#infobox p').hide();
        $('#arrow, #infobox p:eq(' + i + ')').show();
    }
});

JSFIDDLE

...