Blogger和JQuery的问题

Question

我正在写博客，我一直在尝试使用JQuery制作带有某些下拉菜单的菜单，但由于某些原因，它在Blogger上不起作用，在我的电脑上可以正常使用。 我已将脚本和样式添加到页面HTML中，然后将正文放置在HTML块上，但在那里无法正常工作。

来自带有HTML块的博客结构的图片

这是我在电脑上使用的演示。

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        .menu {
            padding:10px 0;
            width: 500px;
        }
        .menu ul {
            list-style-type:none;
            margin:0;
            padding:0;
        }
        .menu ul li {
            display:inline-block;
            position:relative;
        }
        .menu ul li ul {    
            background-color:rgb(225,75,75);
            position:absolute;
            left:0;
            top:40px; /* make this equal to the line-height of the links (specified below) */
            width:200px;
        }
        .menu li li {
            position:relative;
            margin:0;
            display:block;
        }
        .menu li li ul {
            position:absolute;
            top:0;
            left:500px; /* make this equal to the width of the sub nav above */
            margin:0;
        }

        .menu a {
            line-height:40px;
            padding:0 12px;
            margin:0 12px;
        }
        .menu a {
            color:#000;
            text-decoration:none;
            display:block;
        }
        .menu a:hover,
        .menu a:focus,
        .menu a:active {
            color:rgb(255,00,00);
        }

        /* style sub level links */
        .menu li li a {
            border-bottom:solid 1px rgb(200,50,50);
            margin:0 10px;
            padding:0;
        }
        .menu li li:last-child a {
            border-bottom:none;
        }

        /* show arrows for dropdowns */
        .menu li.dropdown > a {
            background-image:url('../img/arrow-down.png');
            background-position:right 20px;
            background-repeat:no-repeat;
        }

        .menu li li.dropdown > a {
            background-image:url('../img/arrow-right.png');
            background-position:right 16px;
            background-repeat:no-repeat;
        }
            /* hide sub menu links */
        ul.sub-menu {
            display:none;
        }

        </style>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
               $('.dropdown').hover( 

                    function(){
                        $(this).children('.sub-menu').slideDown(200,stop()); 
                    },

                    function(){
                       $(this).children('.sub-menu').slideUp(200,stop()); 
                    }

                );

                function stop(){
                    $('.sub-menu').stop(true, true);
                }

            });
            </script>
    </head>
    <body>
    <div class="menu">
        <ul >
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#">Streams</a>
                    <ul class="sub-menu">
                        <li><a href="#">link1</a></li>
                        <li><a href="#">link2</a></li>
                        <li><a href="#">link3</a></li>
                        <li><a href="#">link4</a></li>
                    </ul>

                </li>
                <li><a href="#">Guides</a></li>
                <li><a href="#">Reports</a></li>
        </ul>
    </div>
    </body>
</html>

编辑：我也试图在JQuery函数中发出警报，当鼠标移过菜单时，会显示警报，但下拉菜单中没有。

Answer 1

我自己的问题的答案是... Blogger的HTML / Javascript块小工具应用了一些CSS，使该栏无法显示。 您可以找到一种从小工具中删除CSS的方法，也可以将HTML代码放在HTML页面上。

Blogger和JQuery的问题

问题描述

1 个解决方案

解决方案1
0 2015-11-14 20:07:12

Blogger和JQuery的问题

问题描述

1 个解决方案

解决方案1 0 2015-11-14 20:07:12

解决方案1
0 2015-11-14 20:07:12