Question

我写过这个水平手风琴的功能，到目前为止它运行良好，我已将它添加到外部js文件，并将其加载到每个页面，我现在要做的是在主页上，删除悬停功能，并将颜色设置为#CCC。我已经尝试了所有东西，解开了一个，添加了另一个宽度相同的悬停....

http://uwptestsite.uwpistol.net/menu.html

这是测试页面。

我写的代码就在这里。

    // JavaScript Document    

$(document).ready(function(){
    $(".letter-b").width(12);
    $(".letter-b").css({"overflow":"hidden", "position":"relative"});       

$(".letter-b a").hover(
    function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
    },
    function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
    });

    $(".letter-e").width(12);
    $(".letter-e").css({"overflow":"hidden", "position":"relative"});

    $(".letter-e a").hover(
        function() {
        $(this).parent().stop().animate({"width": "83"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });    

    $(".letter-h").width(12);
    $(".letter-h").css({"overflow":"hidden", "position":"relative"});

    $(".letter-h a").hover(
        function() {
        $(this).parent().stop().animate({"width": "53"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });

    $(".letter-l").width(11);
    $(".letter-l").css({"overflow":"hidden", "position":"relative"});

    $(".letter-l a").hover(
        function() {
        $(this).parent().stop().animate({"width": "54"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "11"}, 300);
        });

    $(".letter-n").width(12);
    $(".letter-n").css({"overflow":"hidden", "position":"relative"});

    $(".letter-n a").hover(
        function() {
        $(this).parent().stop().animate({"width": "43"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });         

    $(".letter-o").width(12);
    $(".letter-o").css({"overflow":"hidden", "position":"relative"});

    $(".letter-o a").hover(
        function() {
        $(this).parent().stop().animate({"width": "94"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });     

    $(".letter-r").width(12);
    $(".letter-r").css({"overflow":"hidden", "position":"relative"});

    $(".letter-r a").hover(
        function() {
        $(this).parent().stop().animate({"width": "95"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });


    $(".letter-w").width(17);
    $(".letter-w").css({"overflow":"hidden", "position":"relative"});

    $(".letter-w a").hover(
        function() {
        $(this).parent().stop().animate({"width": "95"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "17"}, 300);
        });


    $(".letter-x").width(12);
    $(".letter-x").css({"overflow":"hidden", "position":"relative"});

    $(".letter-x a").hover(
        function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });

    $(".letter-y").width(12);
    $(".letter-y").css({"overflow":"hidden", "position":"relative"});

    $(".letter-y a").hover(
        function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });    
});

我真的很挣这个，我想我需要一个禁用选项，但这会使它成为一个插件，我不知道该怎么做..我不希望每个页面都有一个列表启用链接项，因为它在一分钟内增长，所以如果我可以做类似的事情

$("letter-h").disableAccordion();

我希望我有意义，我知道有人会有解决方案，谢谢你！

Answer 1

在您不希望使用该插件的页面上（如果您反对根据页面动态加载插件），您可以放置：

<script type="text/javascript">
$(document).ready(function ()
{
    $(".letter-a").unbind("mouseenter mouseleave");
});
</script>

调用包含js文件后

Answer 2

您可以使用此代码：

$("letter-h").unbind('mouseenter mouseleave');

取消某个页面上的功能

2 个答案: