当前位置： 文江博客话题详情

jQuery 通过单击禁用悬停

发布于 2024-12-27 22:28:21 字数 1954 浏览 0 评论 0原文

我有一个 jQuery 代码，它正在按照我期望的方式工作到某个点。 这里是小提琴

三个菜单项，将鼠标悬停在上面时，会出现一个黑色方块，附加信息会显示在黄色中盒子。 当点击菜单 1 & 3、菜单前出现一个绿色圆圈。 单击菜单 2 时，还会出现一个搜索栏，并在稍有延迟后获得焦点。

到目前为止一切都很好。

例如，我想要的是：

-当单击“menu_item”_2并将鼠标移到另一个项目上时，必须在黄色字段中显示“info_2”。

所以我应该在点击后以某种方式放弃悬停。 当我单击另一个菜单项时，它应该在黄色框中显示相应的信息。

我不是 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();
             });
});
原文

I have a jQuery code, that is working as I expect it to work to a certain point.
Here is the fiddle

Three menu items, when hovered over, a black square and additional info appears in the yellow box.
When clicked menu 1 & 3, a green circle appears before the menu.
When clicked menu 2, a search bar appears also and gets in focus with a little bit of delay.

Until this point everything is fine.

What I want is, for example:

-when 'menu_item'_2 is clicked and I move away the mouse over another item, in the yellow field 'info_2' must be shown.

So I should somehow drop the hover after a click has been made.
And when I click another menu_item it should show the corresponding info in the yellow box.

I'm not an expert in jQuery, so maybe the code is must be done some other way.

Anyway, thanks for your help!

$(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();
             });
});

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

浅忆 2025-01-03 22:28:21

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

I have changed your entire jQuery code. See this jsFiddle for the rework: http://jsfiddle.net/jUHNF/8/

Note: I assumed you wanted to only show the search box for menu item 2, if that's not the case, just remove the following:

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

The code itself should be pretty well commented (maybe a bit too well).

As you can see I have moved all functions into ONE hover/click event, instead of making them into separate events depending on what menu item you clicked on. The idea here is to keep it clean and simple.

What if you want to make further changes to your menu clicks (for example make the currently clicked item italic)? Then you would need to make the change in three places, once for each menu event. If you add a new menu item you would need to duplicate the code once more as well... and so on. By making sure that most of your logic can go under the same event you won't have to duplicate code like this (Don't Repeat Yourself!)

Edit: Pasting jsFiddle code for future reference.

    <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();
    }
});
回复 原文
一萌ing 2025-01-03 22:28:21

试试这个：

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

try this:

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

回复 原文
~没有更多了~

关于作者

对你而言

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文