jquery向上滑動菜單

我想首先隱藏所有子菜單，並且在span.expand上點擊後應顯示所有子菜單。jquery向上滑動菜單

這是我的HTML：

<div class="ym-gbox"> 
    <ul> 
     <li>menu1</li> 
     <li>menu2</li> 
     <ul> 
      <li>submenu1</li> 
      <li>submenu2</li> 
     </ul> 
     <ul> 
      <li>submenu1</li> 
      <li>submenu2</li> 
     </ul> 
    </ul> 
</div> 

<div id="expandbutton"> 
    <span class="button expand">expand</span> 
</div>

和我的jQuery：

jQuery(document).ready(function($) { 
    $('.ym-gbox ul li ul li').hide(); 

     $('.expand').click(function() { 
     if ($(this).hasClass('act')) { 
      $(this).removeClass('act'); 
      $('.ym-gbox ul li').not('.menuactive').children('ul').children('li').slideUp('fast'); 
     } else { 
      $(this).addClass('act'); 
      $('.ym-gbox ul li ul li').slideDown('fast'); 
     } 

    }); 
});

什麼，我做錯了什麼？

來源

2012-08-16 StandardNerd

你選擇不選擇您所期望的元素，我修改了標記，請嘗試以下操作：

<div class="ym-gbox"> 
    <ul> 
     <li class='expand'>menu1</li> 
     <ul> 
      <li>submenu1</li> 
      <li>submenu2</li> 
     </ul> 
     <li class='expand'>menu2</li> 
     <ul> 
      <li>submenu1</li> 
      <li>submenu2</li> 
     </ul> 
    </ul> 
</div>

jQuery(document).ready(function() { 
    $('.ym-gbox > ul ul').hide(); 
    $('.ym-gbox li.active').next().show(); 

    $('.expand:not(.active)').click(function() { 
     $(this).addClass('active').siblings('li').removeClass('active') 
     $(this).siblings('ul').slideUp(); 
     $(this).next('ul').slideDown()     
    }); 
});

http://jsfiddle.net/U5P5Y/

來源

2012-08-16 10:46:15 undefined

謝謝，這是我試圖實施的幻燈片效果。它工作在jsfiddle，但在谷歌Chrome我得到了錯誤信息：未捕獲的語法錯誤：意外的令牌非法 – StandardNerd 2012-08-16 11:03:59

@Lennier歡迎您，在哪一行？除了這個腳本，你還有其他的腳本嗎？ – undefined 2012-08-16 11:11:59

這是因爲您的html無效。它應該是這樣的：

<div class="ym-gbox"> 
    <ul> 
     <li>menu1 
      <ul> 
       <li>submenu1</li> 
       <li>submenu2</li> 
      </ul> 
     </li> 
     <li>menu2 
      <ul> 
       <li>submenu1</li> 
       <li>submenu2</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<div id="expandbutton"> 
    <span class="button expand">expand</span> 
</div>

代碼：http://jsfiddle.net/HCE9j/4/

來源

2012-08-16 10:35:07 Samich

是的，你是對的。但也有正確的HTML我的JS沒有工作。 – StandardNerd 2012-08-16 11:29:15

你有幾個錯別字。檢查答案中的代碼。 – Samich 2012-08-16 11:47:02

爲什麼不給你的子菜單中的自己的ID，並調用是這樣的：

$(".expand").toggle(function(e){ 
$("#submenu).slideUp("slow"); 
}, function(){ 
$("#submenu").slideDown("slow"); 
})

來源

2012-08-16 10:37:31 Dirk

謝謝你dirk。你的解決方案很優雅。但我有一個更復雜的菜單（我簡化了我的問題），你的解決方案不適合我。 – StandardNerd 2012-08-16 11:28:25

jquery向上滑動菜單

回答

相關問題