javascript中的手風琴菜單列表

我試圖在javascript中顯示和隱藏菜單。下面的代碼我到目前爲止。由於某種原因，它不工作。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);

來源

2015-09-29 kiran

你應該糾正你的HTML，點擊'li.dropdown'也會立即重定向到'../ home/index.html'。 – xxxmatko

@ xxxmatko：改變鏈接 – kiran

添加html後應該添加事件處理程序。改變他們的地位。它應該看起來像：

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

來源

2015-09-29 07:52:07

@ Lazarev Alexandr：你能提出建議我應該怎麼做？我不知道這一點。 – kiran

更新了我的答案。 –

是的。它的工作現在。但是，如果我點擊*主菜單1 /主菜單2 *，然後子菜單在秒的幾分之一。如果我刪除*主菜單的錨標記，然後顯示子菜單。爲什麼這樣？如果我想在主菜單上鍊接，那我應該怎麼做？你能告訴我嗎？ – kiran

請加click()事件偵聽器添加你的菜單$('#wrapper')後喜歡如下：

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

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

來源

2015-09-29 07:52:18 vijayP

其上面的工作。但是，如果我點擊*主菜單1 /主菜單2 *，然後子菜單在秒的幾分之一。如果我刪除*主菜單的錨標記，然後顯示子菜單。爲什麼這樣？如果我想鏈接*主菜單*也應該怎麼得到？你能告訴我嗎？ – kiran

正如我在你的帖子中對你的評論所說的，在你的'li'裏面你有'''''href'設置的元素，當你點擊它時會導致重定向。 – xxxmatko

我改寫了你的例子：

$(function() { 
 
    var ext = "???"; 
 
    $("#wrapper").append(
 
    \t '<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>' 
 
    \t +'</ul>'); 
 
    $("a.dropdown + ul").hide(0); 
 
    $("a.dropdown").click(function(e) { 
 
     e.preventDefault(); 
 
    \t $("a.dropdown").not(this).siblings("ul").hide(0); 
 
    \t $(this).siblings("ul").toggle(); 
 
\t }); 
 
});

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

來源

2015-09-29 08:30:54 xxxmatko

javascript中的手風琴菜單列表

回答

相關問題