0

上部のボタンをクリックしてドロップダウン メニューを表示できるフレンド リストを作成しようとしています。

    <script>
var dropAll = false;    

function changeAllFriendsDrop()
{
   if (dropAll == false)
       {
               dropAll = true;
        }
        else
            {
                dropAll = false;
            }
}
</script>

私の関数は十分に単純ですが、onClick を呼び出そうとすると、機能していないようです。

<li role="heading" data-role="list-divider" style="color:#F25A97">

                    <a >      
                        <button onclick="changeAllFriendsDrop()">All Friends </button>
                    </a>
                        </li>

       {$friend = array("Josh","Phil","Paul","Sean")} 

                {if !empty($friend)}
                    {foreach $friend as $person}
                      <script> if (dropAll == true){ </script>
                        <li data-theme="a" style="color:#F25A97">
                               <a href="">
                            {$person}
                               </a>
                               <a align="left" style="size: 10px">
                               Last Seen: {$lastLocation}
                               </a>
                        </li>
                        <script> } </script>
                    {/foreach}
                {/if}

関数を呼び出していないようで、if ステートメントをチェックできないため、アドバイスをいただければ幸いです。

4

1 に答える 1

0

コールバック関数dropAllは実際にはページ上で何も変更していません。変数を設定しているだけです。この行if (dropAll == true)は一度だけ評価され、それでも有用なことは何もしません-そのifようなJavaScriptはブラウザにコンテンツを非表示にするように指示しません、それはそれがどのように機能するかではありません。（実際、各タグは個別に評価されるため、最初のタグに<script>ないため、JavaScriptエラーが発生する可能性があります。）}<script>

あなたがする必要があるのは、ページのそれらの部分の可視性を実際に切り替えるJavaScript関数を書くことです。「プレーンな」JavaScriptでこれを行うのではなく、jQueryなどのJavaScriptライブラリを使用することを強くお勧めします。

たとえば、切り替えたい各要素を指定した場合、次のようclass="togglableFriendItem"にjQuery.toggle()関数を使用できます。

function toggleAllFriendsDrop()
{
    $('.togglableFriendItem').toggle();
}
于 2013-01-13T21:12:48.547 に答える