0

javascript を使用して、ある種の展開/折りたたみリストを実行したいと考えています。私の知る限り、私はすべて正しく行いましたが、リストの見出しをクリックすると、

キャッチされていない SyntaxError: 予期しないトークン }

htmlコードのと。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kaç Yakıyor?</title>
    <style type="text/css">
    body
    {
        background-color:#CCC;
    }
    h1.header
    {
        font-family:"Courier New", Courier, monospace;
        font-size:45px;
        font-style:oblique;
        font-weight:400;
        text-align:center;
    }
    div.content
    {
        margin-top:100px;
        margin-left:auto;
        margin-right:auto;
        width:61%;
        background-color:#F00;
    }
    div.vehicles
    {
        margin-top:100px;
        width:17%;
        height:200px;
        background-color:#0F6;
        float:left;
        overflow:auto;
    }
    li.c
    {
        font-weight:bold;
    }
    li
    {
        font-weight:normal;
        display:none;
    }
    </style>
    </head>
    <body>
    <?php
    mysql_connect("localhost","root","123123") or die(mysql_error());
    mysql_select_db("kacyakiyor");
    $query = "SELECT marka,model from arabalar";
    $result = mysql_query($query);
    ?>
            <h1 class="header">KAÇ YAKIYOR</h1>
            <hr width="500px"/>
            <div class="vehicles">
            <h2><strong><em>Araba</em></strong></h2><hr/>
    <?php
            while($row = mysql_fetch_array($result)){

                echo "<ul >";
                    echo "<li.c id='seen'><a href='#' onclick='show('hidden')'>".$row['marka']."</a>";
                        echo "<ul>";
                            echo "<li id='hidden'>".$row['model']."</li>";
                        echo "</ul>";
                echo "</ul>";       
            }    
    ?>
            <h2><strong><em>Motosiklet</em></strong></h2><hr/><br/></div>
            <div class="content">asdfasfda</div>

    <?php
    mysql_close();
    ?>
    <script type="text/javascript">
        function show(id){
            var hiddenElement = document.getElementById(id);
            if(hiddenElement.style.display == 'none')
            {
                hiddenElement.style.display = 'block';
            }
            else
            {
                hiddenElement.style.display = 'none';
            }
        }
    </script>
    </body>
    </html>

この直後にエラーが発生しますが、余分な「}」は表示されません。

<div class="content">asdfasfda</div>
4

4 に答える 4

0

jQuery childrenを使用します:

    $("li.c a").click(function(){
    var children = $(this).children();
    if(children.filter(":visible").length > 0)
    children.hide();
    else children.show();
//or do something you like
    });

さらに説明が必要な場合はお知らせください。

PS: li.c - ということli class='c'ですか?

同様の目的でjQuery UI アコーディオンを使用することもできます。

于 2013-08-29T05:30:40.573 に答える
0

この行を変更

 echo "<li.c id='seen'><a href='#' onclick='show('hidden')'>".$row['marka']."</a>";

に

echo "<li.c id='seen'><a href='#' onclick='show(\"hidden\")'>".$row['marka']."</a>";

アップデート

私が気づいたことの 1 つは、同じ ID を持つ複数の要素を生成するループ内で要素 ID を使用していることです。同じ ID の要素を複数持つことはできないため、class を使用してクラス名で選択することをお勧めします。

于 2013-08-29T05:30:15.517 に答える
0

JavaScript で引用符をエスケープする際に問題があります。

このonclickをから変更します

onclick='show('hidden')'

に

 onclick='show(\"hidden\")'
于 2013-08-29T05:32:35.810 に答える
0

他のポスターが言ったこととは別に、次の行を変更する必要があります。

echo "<li.c id='seen'><a href='#' onclick='show('hidden')'>".$row['marka']."</a>";

に

echo "<li id='seen'><a href='#' onclick='show(\"hidden\")'>".$row['marka']."</a>"; の

他に考えられる唯一のことは、データに } が含まれているかどうかです。あなたはしなければならないかもしれませんhtmlentities($row['marka'])

于 2013-08-29T05:38:26.110 に答える