jQuery通过单击禁用悬停

Question

我有一个 jQuery 代码，它可以按我预期的那样工作到某个点。 Here 是小提琴

三个菜单项，当将鼠标悬停在上面时，一个黑色方块和附加信息会出现在黄色框中。 单击菜单 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();
             });
});

Answer 1

我已经更改了您的整个 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();
    }
});

Answer 2

试试这个：

$(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

Answer 3

类似http://jsfiddle.net/workdreamer/TqxyY/