-6

这是我的菜单 JavaScript 函数。现在我的菜单通过点击打开并通过点击关闭。我想在鼠标离开按钮时单击并关闭来打开。

$("#theme_select").click(function() {
    if (theme_list_open == true) {
        $(".center ul li ul").hide();
        theme_list_open = false;
    } else {
        $(".center ul li ul").show();
        theme_list_open = true;
    }
    return false;
});​

我与一个人一起编辑并修复了最重要的问题。但是当我想将鼠标移动到打开的菜单项时，菜单已关闭。查看我的完整脚本（更改前）：

<script type="text/javascript">

    var theme_list_open = false;

    $(document).ready(function () {

        function fixHeight () {

        var headerHeight = $("#switcher").height();

        $("#iframe").attr("height", (($(window).height() - 1) - headerHeight) + 'px');

        }

        $(window).resize(function () {

            fixHeight();

        }).resize();

        $("#theme_select").click( function () {

            if (theme_list_open == true) {

            $(".center ul li ul").hide();

            theme_list_open = false;

            } else {

            $(".center ul li ul").show();               

            theme_list_open = true;

            }

            return false;

        });

        $("#theme_list ul li a").click(function () {

        var theme_data = $(this).attr("rel").split(",");

        $("li.purchase a").attr("href", theme_data[1]);
        $("li.remove_frame a").attr("href", theme_data[0]);
        $("#iframe").attr("src", theme_data[0]);

        $("#theme_list a#theme_select").text($(this).text());

        $(".center ul li ul").hide();

        theme_list_open = false;

        return false;

        });

    });

    </script>
4

2 回答 2

2

像这样 ？

示例..（如果您对 jQuery 足够了解，只需编辑您的元素选择器）

HTML：

<ul>
    <li>Menu#1</li>
    <span>Sub</span>
    <li>Menu#2</li>
    <span>Sub</span>
</ul>

jQuery :

$("ul li").click(function () {
    $(this).addClass("showing").next("span").show();
});

$('ul').mouseout(function() {
  $("ul li.showing").removeClass().next("span").hide();
});

演示：http: //jsfiddle.net/JcKxV/

在你的情况下编辑......看起来像......

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").addClass("showing").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
  $(".center ul li ul.showing").removeClass().hide();
    theme_list_open = false;
});

或者

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
    if (theme_list_open == true) {
      $(".center ul li ul").hide();
        theme_list_open = false;
    }
});
于 2012-12-04T21:36:01.867 回答
1

[@PeeHaa 想说的是] 使用该jQuery .hover()功能。

$("#theme_select").click(function() {
    if ($("#theme_select").is(":visible")) {
        $(".center ul li ul").hide();
    } else {
        $(".center ul li ul").show();
    }
    return false;
});​


$("#theme_select").hover(function() {
     //Do Nothing
    },function(){
        $(".center ul li ul").hide(); //Mouse leave
});​

第一个函数表示当鼠标悬停在 theme_select 上时执行的代码。第二个函数表示当鼠标离开theme_select 时执行的代码。

于 2012-12-04T21:29:39.340 回答