JQuery的切換內容

我試圖做一個簡單的效果基本show了slideDown內容JQuery的切換內容

我有下面的代碼至今：

<style type="text/css"> 
    ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 
    li { 
     padding-left: 20px; 
    } 

    a { 
     color: #000000; 
     cursor: pointer; 
     text-decoration: none; 
    } 
    a:hover { 
     cursor:pointer; 
    } 
    .first { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     font-size: 16px; 
     font-weight: bold; 
     color: #C00; 
    } 
    .text { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     font-size: 14px; 
     font-style: italic; 
     font-weight: lighter; 
     color: #666; 
    } 
    .subhead { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     font-size: 14px; 
     font-weight: bold; 
     color: #F90; 
    } 
    </style> 
    <script language="JavaScript" type="text/JavaScript" src="js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 

     $('li > ul').each(function(i) { 
      // Find this list's parent list item. 
      var parent_li = $(this).parent('li'); 
      var siblings_li = $(this).parent('li').siblings(); 

      var sub_ul = $(this).remove(); 
      parent_li.wrapInner('<a/>').find('a').click(function() { 
       // Make the anchor toggle the leaf display. 
       if (sub_ul.is(':hidden')){ 
       //siblings_li.slideUp('200'); 
       sub_ul.slideDown('200');} 
       else { 
        sub_ul.slideUp('200');} 
      }); 
      parent_li.append(sub_ul); 
     }); 

     // Hide all lists except the outermost. 
     $('ul ul').hide(); 
    }); 
    </script> 
    </head> 

    <body> 
    <ul> 
     <li><span class="first">College Programs 
     </span> 
     <ul> 
      <li class="text">We have a variety of programs. more more more more more more more more more more more</li> 
     </ul> 
     </li> 
     <li><span class="first">Programs 
     </span> 
     <ul> 
      <li class="text">Each of our Colleges have various ..... COE shown below.</li> 
      <li><span class="subhead">Computer Science 
      </span> 
      <ul> 
       <li>Computer engineers analyze, design, operate and manage complex digital hardware, computer networks and large-scale software systems.</li> 
      </ul> 
      </li> 
      <li><span class="subhead">Electrical Engineering 
      </span> 
      <ul> 
       <li>Electrical engineers influence various sectors of society by analyzing, designing and implementing a wide range of systems.</li> 
      </ul> 
      </li> 

     </ul> 
     </li> 
     <li class="first">More Info</li> 
    </ul>

一切工作正常，但我想它，這樣，當我點擊一個頭銜，其他人崩潰。即，一次只能看到一個內容。並且默認情況下它們都應該被最小化（隱藏）。我的問題是，如何使其成爲最小化所有其他內容，如果其中一個顯示。

謝謝！

來源

2013-01-02 user1248589

你爲什麼不用戶jQuery Accordion解決你的問題。它有許多方便的配置參數（例如animate用於爲更改面板設置動畫）。

The library已被用於成千上萬的人在相當一段時間，所以你可以放心，這是行之有效的，應該沒有問題的工作。

編輯

您可以添加accordion到頂級元素以及子元素。以你的例子：

如果添加id="topaccordion"到根<ul>元素（<ul id="topaccordion">）和id="subaccordion"到<li id="subaccordion"><span class="subhead">Computer Science</span>那麼你的JavaScript函數看起來是這樣的：

$('#subaccordion').accordion(); 
$('#topaccordion').accordion();

我已經測試過這一點，它做工精細。你可能會需要在CSS一點的工作（例如改變鼠標光標懸停時「點擊」元素等上），但從accordion功能點做這項工作。

來源

2013-01-02 14:08:13 Tom

感謝您的答覆。我看了一下手風琴。我喜歡它，但它似乎不支持（或我不知道如何）副標題。如果您嘗試上述腳本，則會有一個子標題（計算機和電子工程），它們有自己的內容，應該會出現並消失。任何想法，如果我可以做到這一點使用手風琴？如果可以，請直接指導我？ – user1248589

就隱藏顯示選中一個之前的所有項目。

<script> 
$(function() { 

    // Cache commonly used selectors 
    var uls = $('ul ul'); 

    $('li > ul').each(function(i) { 

     // Find this list's parent list item. 
     var parent_li = $(this).parent('li'); 
     var siblings_li = $(this).parent('li').siblings(); 

     var sub_ul = $(this).remove(); 
     parent_li.wrapInner('<a/>').find('a').click(function() { 

      // Hide all items first 
      uls.slideUp('200'); 

      // Make the anchor toggle the leaf display. 
      if (sub_ul.is(':hidden')) { 
       //siblings_li.slideUp('200'); 
       sub_ul.slideDown('200'); 
      } 
      else { 
       sub_ul.slideUp('200'); 
      } 
     }); 
     parent_li.append(sub_ul); 
    }); 

    // Hide all lists except the outermost. 
    uls.hide(); 
}); 
</script>

演示：http://jsfiddle.net/MmG7a/

來源

2013-01-02 14:16:36 jingtao

感謝您的回覆。我從jsfiddle測試了演示。除了現在副標題計算機工程和電氣工程似乎沒有擴大外，它工作得很好。它隱藏了內容。你能告訴我如何解決這個問題嗎？ – user1248589

JQuery的切換內容

回答

相關問題