-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の上に置いたときに実行されるコードを表します。2番目の関数は、マウスがtheme_selectを離れたときに実行されるコードを表します。

于 2012-12-04T21:29:39.340 に答える