web-dev-qa-db-ja.com

単純な拡張可能な垂直メニュー、Javascriptの問題

私はワードプレスでシンプルな拡張可能なメニューを作成しようとしています。私が使っているJavascriptを見ることができます（コピーしてインターネットからミックスしてください）。

<script type="text/javascript">
    $(document).ready(function($) {
        $('#access li').has('ul').addClass('has_submenu');
        $('#access ul li.has_submenu a').click(function() {
            $("#access ul ul").toggleClass("showHide");
        }); 
    });
</script>

最初の部分は大丈夫です、スクリプトは私のメニューにhas_submenuクラスを追加します。

2番目の部分はshowHideクラスを切り替えます。私の問題は、showHideクラスをクリックすると表示されますが、直後に表示が消えることです（ページのリロード）。

助けてくれてありがとう:)

customizationmenusjavascript
1
Matus

これを試して ：

<script type="text/javascript">
    $(document).ready(function($) {
        $('#access li').has('ul').addClass('has_submenu');
        $('#access ul li.has_submenu > a').click(function(event) {
            event.preventDefault();
            $("#access ul ul").toggleClass("showHide");
        }); 
    });
</script>

JQuery APIの event.preventDefault を参照してください。

3
mike23