Question

这是我的菜单JavaScript功能。现在我的菜单打开了，点击＆amp;点击关闭。我想打开点击＆amp;鼠标离开按钮时关闭。

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

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

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

Answer 1

喜欢这个吗？

示例..（如果您对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;
    }
});

Answer 2

[@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时执行的代码。

如何使用click＆amp; amp打开javascript菜单用鼠标关闭

2 个答案: