Question

我想在javascript中显示和隐藏菜单。到目前为止，我的代码如下。由于某种原因它不起作用。

任何人都可以帮助我吗？

var menuHtm = '<ul id="demo-nav">'
    +'<li><strong>Demo Links</strong></li>'
    +'<li class="dropdown"><a href="../home/page1.html'+ext+'">Main Menu 1</a>'
    +'<ul style="display : none;text-decoration:none;">'
    +'<li><a href="../home/page2.html'+ext+'">Sub menu 1</a></li>'
    +'<li><a href="../home/page3.html'+ext+'">Sub menu 2</a></li>'
    +'</ul></li>'
    +'<li class="dropdown"><a href="../home/page4.html'+ext+'">Main Menu 2</a>'
    +'<ul style="display : none;text-decoration:none;">'
    +'<li><a href="../home/page5.html'+ext+'">Sub menu 1</a></li>'
    +'<li><a href="../home/page6.html'+ext+'">Sub menu 2</a></li>'
    +'</ul></li>'
    +'<li><a class="blue close" style="text-decoration:none; line-height:20px; cursor:pointer;">[x] close</a></li>'
    +'</ul>';

$('li.dropdown').click(function() {
    $('li.dropdown').not(this).find('ul').hide();
    $(this).find('ul').toggle();
});

$('#wrapper').append(menuHtm);

Answer 1

将菜单添加到click()之后，请添加$('#wrapper')事件监听器，如下所示：

$('#wrapper').append(menuHtm);

$('li.dropdown').click(function() {
       $('li.dropdown').not(this).find('ul').hide();
       $(this).find('ul').toggle();
});

Answer 2

你应该在追加html后添加事件处理程序。用他们的地方改变这些陈述。它应该看起来像：

$('#wrapper').append(menuHtm); 
$('li.dropdown').click(function() {
       $('li.dropdown').not(this).find('ul').hide();
       $(this).find('ul').toggle();
    });

Answer 3

我重写了你的例子：

$(function() {
    var ext = "???";
    $("#wrapper").append(
    	'<ul id="demo-nav">'
            + '<li><strong>Demo Links</strong></li>'
            + '<li>'
                + '<a class="dropdown" href="#">Main Menu 1</a>'
                + '<ul>'
                    + '<li><a href="../home/page2.html'+ext+'">Sub menu 1</a></li>'
                    + '<li><a href="../home/page3.html'+ext+'">Sub menu 2</a></li>'
                + '</ul>'
            + '</li>'
            + '<li>'
                + '<a class="dropdown" href="#">Main Menu 2</a>'
                + '<ul>'
                    + '<li><a href="../home/page5.html'+ext+'">Sub menu 1</a></li>'
                    + '<li><a href="../home/page6.html'+ext+'">Sub menu 2</a></li>'
                + '</ul>'
            + '</li>'
            + '<li>'
                + '<a href="#" class="blue close">[x] close</a>'
            + '</li>'
    	+'</ul>');
    $("a.dropdown + ul").hide(0);
    $("a.dropdown").click(function(e) {
        e.preventDefault();
    	$("a.dropdown").not(this).siblings("ul").hide(0);
    	$(this).siblings("ul").toggle();
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper"></div>

javascript中的手风琴菜单列表

3 个答案: