0

これを達成するために複数の方法を検索して試しましたが、役に立ちませんでした...

私は以下の現在のコードを提供しています....お気軽に批評し、必要な助けを提供してください...

<script src="jquery.js"></script>
<div id="navigation">
<p><a href="#" id="toggle">Leave A Note</a></p>
<ul id="menu">



<li><a href="/#" class="theengineer">Artist</a><ul>
    <li><a href="#" class="Sketchbook">Sketchbook</a></li><li><a href="#" class="Music">Music</a></li><li><a href="#" class="Artwork">Artwork</a></li><li>
    <a href="#" class="Media">Media</a></li><li><a href="#" class="Words">Words</a></li></ul>
    </li>
    <li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></ul></li></div>

<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->

<script>

var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';

$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();

hideMenu = function() {
    $('#navigation ul#menu').hide();
    $('#navigation').removeClass('Open');
    $('#toggle').text(showMenuText);
    }
    $('#toggle').click(function(event){
        event.stopPropogation(); event.preventDefault();
        $('#navigation ul#menu').toggle();
        $('#navigation').toggleClass('open');
        var toggleText = $('#toggle').text();

        (toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
        $('ul#menu > li > a').click(function(event){
            $this = $(this);
            if ($this.hasClass('page') ) parent.location = $this.attr('href');
            if ($this.hasClass('home') ) { parent.location = '/'; }

            event.preventDefault(); event.stopPropagation();
            if( $this.hasClass('active') ) var justclosed = true;
            $('a.active').removeClass('active').next('ul').hide();
            if(!justclosed) $this.addClass('active').next('ul').show();
            });
            </script>

ここ

javascript が期待どおりに機能していません。順序付けされていないリストはまだリストとして表示されており、非表示になっていないためです。アドバイスをいただければ幸いです。..

4

2 に答える 2

0

relativeドロップダウン メニューは、要素と要素を使用した純粋な CSS で実行できますabsolute。次の HTML を検討してください。

<ul>
    <li>Level 1</li>
    <li>
        Level 2
        <ul>
            <li>Level 2-1</li>
            <li>Level 2-2</li>
            <li>Level 2-3</li>
            <li>Level 2-4</li>
            <li>Level 2-5</li>
        </ul>
    </li>
    <li>Level 3</li>
    <li>Level 4</li>
    <li>Level 5</li>
</ul>

水平

動作中のjsFiddleデモ

ここに画像の説明を入力

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: 20px;
    left: -1px;
    display: none;
}

ul ul li + li {
    margin-left: 0;
    margin-top: -1px;
}

ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid blue;
    width: 150px;
    float: left;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-left: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}

垂直

動作中のjsFiddleデモ

ここに画像の説明を入力

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: -1px;
    left: 150px;
    display: none;
}



ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid #4169e1;
    width: 150px;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-top: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}
于 2013-06-06T04:22:56.153 に答える