0

我正在尝试创建一个朋友列表，您可以在其中单击顶部的按钮以获取下拉菜单。

    <script>
var dropAll = false;    

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

我的功能很简单，但是当我尝试调用它时，它似乎不起作用。

<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 函数来实际切换页面这些部分的可见性。我强烈建议使用jQuery之类的 JavaScript 库，而不是在“普通”JavaScript 中执行此操作。

例如，如果你给了你想要切换的每个元素class="togglableFriendItem"，你可以像这样使用 jQuery.toggle()函数：

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