0

以下の HTML、CSS、および Javascript コードを使用して、水平サブメニューをレンダリングしようとしています。

2 つのオプションをクリックすると、メニュー自体が表示されません。基本的に何も出ません...

HTML

<div id="topnav">
    <ul>
        <li>
            <a href="#">Artist</a>
            <ul class="submenu">
            <li><a href="#">Sketchbook</a></li>
            <li><a href="#">Words</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Artwork</a></li>
            </ul>
            </li>
            <li><a href="#">UI/UX Developer</a>
            <ul class="submenu">
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Resume</a></li>
            </ul>
            </li>
    </ul>

    </div>


</body>

CSS

<style type="text/css">
h1 { position: absolute;
top: 130%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /*half the height */
margin-left: -250px; /*half the width */
font-variant: small-caps;
text-align: center;
color:#737b83;      }
</style>
<style type="text/css">
a:link { color:#737b83;
                            font-variant: small-caps;
                            text-decoration: none;
                            }

a:visited { font-variant: small-caps;
            color: #3f6317;
            text-decoration: none;
            }

a:hover     { font-variant: small-caps;
            color: #103b50;
            text-decoration: none;
            }

a:active    { font-variant: small-caps;
            color: #44aadd;
            text-decoration: none;
            }
                            </style>

<style type="text/css">
p {position: absolute;
    left: 85%; 
    color:#737b83;
    font-variant: small-caps;
    }
</style>


<style type="text/css">
        #topnav
        { 
        float: left;
        width: 900px;
        height: 24px;
        margin-top: 3px;
        position: relative;
        font-size: 12px;
        }

        #topnav ul
        {
        list-style: none;
        padding: 0;
        margin: 0;
        }
        #topnav ul li
        {
        float: left;
        margin: 0;
        padding: 0;
        }

        #topnav ul li a 
        {
        padding: 5px 15px;
        text-decoration: none;
        display: block;
        font-weight: bold;
        }
        #topnav ul li a:link
        {
        text-decoration: none;
        }
        #topnav ul li a:visited
        {
        text-decoration: none;
        }

        #topnav ul li a.active
        {
        text-decoration: none;
        }

        #topnav ul li ul.submenu
        { float: left;
        position: absolute;
        left: 0;
        top: 24px;
        display: none;
        }

        #topnav ul li ul.submenu a 
        { 
        display: inline;
        }
        #topnav ul li ul.submenu li:last-child
        {
        border-right-style: none;
        }
        </style>

JavaScript

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">  
                var ddmenuitem  = 0;
            function jsddm_open()
            { jsddm_close();
            ddmenuitem = 
            $(this).find('ul.submenu').css('display', 'block');
            }
            function jsddm_close()
            {
            if(ddmenuitem) ddmenuitem.css('display','none');
            }
            $(document).ready(function()
            {
            $('#topnav > ul > li ').bind('click', jsddm_open)
            $('#topnav > ul > li > a').click(function(){
                if ($(this).attr('class') !='active')
                {
                $('#topnav ul li a').removeClass('active');
                }
                });
                });

                </script>

<script language="javascript">
    var ddmenuitem  = 0;
    function jsddm_open()
    { jsddm_close();
    ddmenuitem = 
    $(this).find('ul.submenu').css('display', 'block');
    }
    function jsddm_close()
    {
    if(ddmenuitem) ddmenuitem.css('display','none');
    }
    $(document).ready(function()
    {
    $('#topnav > ul > li ').bind('click', jsddm_open)
    $('#topnav > ul > li > a').click(function(){
        if ($(this).attr('class') !='active')
        {
        $('#topnav ul li a').removeClass('active');
        }
        });
        });

        </script>

表示されない理由を誰か説明できますか?

4

1 に答える 1

1

あなたのコードはうまくいきました。

http://jsfiddle.net/UFMjb/

jQuery が正しく含まれているかどうかを確認できますか?

<script src="/path/to/jquery"></script>
<script>
  //your script goes here
</script>

更新：ヘッダーのJavaScriptの上にこれを含めてみてください：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
于 2013-06-07T07:53:56.200 に答える