點擊展開，單擊時摺疊所有其他人

我已經有了很多成功與以下jquery函數。它允許您隱藏內容，直到標題被點擊，然後擴展ul項。我喜歡這個功能，但是我真的很喜歡一次只能打開一個ul。我怎樣才能做到這一點，以便當標題被點擊時，它擴大了那個，並崩潰了所有打開的其餘部分？點擊展開，單擊時摺疊所有其他人

<script type="text/javascript"> 
    $(document).ready(function() { 
     setTimeout(function() { 
      // Slide 
      $('#expandable_menu > ul > a.expanded + li').slideToggle('slow'); 
      $('#expandable_menu > ul > a').click(function() { 
       $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> li').slideToggle('slow'); 
      }); 

     }, 250); 
    }); 
</script>

這是擴展和崩潰的東西的結構。

<ul id="expandable_menu" class="expandable_menu"> 

    <ul> 
     <a class="expanded">TITLE</a> 
    <li class="expandablemenu" "> 
      <ul> 
        <li> 
         <div> This is where the content goes </div> 
        </li> 
      </ul> 
    </li> 
     </ul> 

    <ul> 
     <a class="expanded">TITLE</a> 
    <li class="expandablemenu" "> 
      <ul> 
        <li> 
         <div> More content! </div> 
        </li> 
      </ul> 
    </li> 
     </ul> 

</ul>

來源

2013-09-16 user2755541

您可以發佈相關的HTML，所以我可以做一個小提琴？編輯：或者，更好的是，你做小提琴並將其張貼在這裏... – brbcoding

'ul> a'？錨不能成爲ul的直接後裔.... – PSL

嗨brbcoding，我發佈了你的原始問題的HTML。謝謝！ – user2755541

看到您用小提琴更新......我沒有太多時間，但如果您想要，您可以先將所有內容隱藏起來，然後繼續並切換您實際想要切換的那個。

$(document).ready(function() { 
    setTimeout(function() { 
     // Slide 
     $('#expandable_menu > ul > a.collapsed + li').slideToggle('slow'); 
     $('#expandable_menu > ul > a').click(function() { 
      // I only added this 
      $('#expandable_menu > ul > li').hide('slow'); 
      $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> li').slideToggle('slow'); 
     }); 

    }, 250); 
});

Forked & Updated Demo

來源

2013-09-17 19:56:45 brbcoding

如果您希望爲此使用jqueryUi，那麼手風琴控件就是您所描述的場景。手風琴控制具有與其行爲有關的各種選項。您可以在jqueryUi網站上查看手風琴。它很容易實現。另一件事..如果你不想使用另一個lib ...它可以很容易地使用js來完成。粘貼你的HTML在這裏，這將是有益的。

來源

2013-09-16 17:29:03 wildbisu

由第一條語句判斷。我假設李是標題的下一個元素。因此，不要在所有li上執行slideToggle，而是希望更具體地確定哪些是slideUp和slideDown。

<script type="text/javascript"> 
    $(document).ready(function() { 
     setTimeout(function() { 
      // Slide 
      $('#expandable_menu > ul > a.expanded + li').slideToggle('slow'); 
     }, 250); 
     $('#expandable_menu > ul > a').click(function() { 
      if($(this).hasClass("expanded"){ 
       $(this).next("li").slideUp(); 
      } 
      else{ 
       $(this).next('li').slideDown() //opening the next li which is the title you wanted 
        .siblings('li').slideUp(); //find all the other li's and slide up 
      } 
      $(this).toggleClass('expanded').toggleClass('collapsed'); 
     }); 
    }); 
</script>

添加了元素的代碼，以按照您的要求進行備份。基本上你需要檢查鏈接是否有類，如果它確實是slideUp，因爲它已經打開，否則就是因爲它沒有打開而滑動。

來源

2013-09-16 17:32:02 kenttam

我認爲它很接近，但物品不會滑回。我將在原始問題中發佈結構。 – user2755541

@ user2755541更新了我的回答，因此該項目也將滑回。 – kenttam

點擊展開，單擊時摺疊所有其他人

回答

相關問題