2011-08-03 8 views
1

どのような提案も良いでしょう。それは非常に簡単ですが、私はそれを理解することはできません。シンプルなjQueryアコーディオン - 表示されているボタンを非表示にする

私は単純なjQueryアコーディオンスクリプトを使用しています。ここではHTMLです:

<ul id="menu"> 
    <li> 
     <a>Weblog Tools</a> <!-- THIS IS MY LINK BUTTON --> 
      <ul> 
       <li><a href="http://www.pivotx.net/">PivotX</a></li> 
       <li><a href="http://www.wordpress.org/">WordPress</a></li> 
       <li><a href="http://www.textpattern.com/">Textpattern</a></li> 
       <li><a href="http://typosphere.org/">Typo</a></li> 
      </ul> 
    </li> 
    <li> 
     <a>Programming Languages</a> <!-- THIS IS MY LINK BUTTON --> 
      <ul> 
       <li><a href="http://www.php.net/">PHP</a></li> 
       <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li> 
       <li><a href="http://www.python.org/">Python</a></li> 
       <li><a href="http://www.perl.org/">PERL</a></li> 
       <li><a href="http://java.sun.com/">Java</a></li> 
       <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li> 
      </ul> 
    </li> 
</ul> 

そして、ここでスクリプトです:

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu ul:first').show(); 

    $('a.collapse').click(

function() { 
    var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
    return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 

    $('#menu ul:visible').slideUp('normal'); 


     checkElement.slideDown('normal'); 
    return false; 
      } 
     }); 
    } 

    $(document).ready(function() {initMenu();}); 

ナイス単純なスクリプト、素敵な光。

これは私の質問ですが、どんな提案も素晴らしいでしょう!

現在表示されているメニューの<a>Link Button</a>display: noneにして、開いているメニューを交互に表示する必要があります。

考えられるのは、現在表示されているメニューが開いているとき、そのメニューを開くリンクにスタイルdisplay: noneが追加されているということです。しかし、他のすべての<a>Link Buttons</a>が表示され、スタイルdisplay: noneが適用されていないはずです。これはメニューが機能するようにするためのものです。

表示されている開いているメニューのみがdisplay: noneである必要があります。

あなたが手助けできれば、これはとても素晴らしいことです。前もって感謝します。

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu ul:first').show(); 
    $('#menu li a').click(
    function() { 
     var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
     return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
     $('#menu ul:visible').slideUp('normal'); 
     checkElement.slideDown('normal'); 
     return false; 
     } 
     } 
    ); 
    } 
$(document).ready(function() {initMenu();}); 

からこれに

+1

で働いて実装を確認することができます。 – tw16

+0

本当ですか?それは不思議です、私はマックでトロイの木馬のウイルスに気づいていませんでした。 – Joshc

答えて

0

修正menu.js:それは最初のサブメニューが表示されませんので

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu li a').click(
    function() { 
     var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
     return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
     $('#menu li a').show(); 
     $(this).hide(); 
     $('#menu ul:visible').slideUp('normal'); 
     checkElement.slideDown('normal'); 
     return false; 
     } 
     } 
); 
} 
$(document).ready(function() {initMenu();}); 

は、私が最初の部分を修正しました。 次に、この行を追加して、他のリンクを表示するがアクティブなリンクを非表示にする。

$('#menu li a').show(); 
$(this).hide(); 

EDIT:

また、私のアンチウイルスは、私にあなたがトロイの木馬と私のコンピュータに感染しようとしたリンクを語っているhttp://jsfiddle.net/3cmPz/

+0

ありがとうございました。 私はあなたのコードを使用し、これを最初にまだ開いていたので、これを追加しました:$( '#menu ul:first')。 - その後、リンクにインラインCSSを追加して、何も表示しませんでした。それは2完璧の間で交互になります。 ありがとう! – Joshc