单击列表成员时显示子项
Show childs when list member is clicked
我想用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>
更改此行
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>";
更新
我注意到的一件事是,你在一个循环中使用元素id,这个循环将生成多个具有相同id的元素。你不能有多个具有同一id的元素,所以最好使用class并根据它们的类名来选择它们。
您在javascript中转义引号时遇到问题。
从更改此onclick
onclick='show('hidden')'
至
onclick='show('"hidden'")'
除了其他海报所说的之外,您还需要更改这一行:
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'])
我会使用jQuery子级:
$("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
});
如果你需要更多的解释,请告诉我。
第页。S.:李-你是说li class='c'
吗?
您也可以将jQueryUI手风琴用于类似的目的。
相关文章:
- 突出显示列表的父项,但不突出显示所有子项
- 如何随机显示列表项的顺序
- 在underscore.js中显示列表中的所有项目(使用Parse.com)
- 使自动完成可搜索下拉菜单don'我不想在点击搜索时显示列表
- 用javascript在html显示列表中显示新成员
- 单击旧列表只显示上次创建的id,应在单击时显示列表id
- Ember-解决所有请求时显示列表
- 隐藏并显示列表中的元素
- 仅在单击下拉列表中的项目时显示列表框
- Ui自动完成不显示列表
- 单击按钮时隐藏并显示列表
- 在可滚动的库中显示列表
- 无序列表 jQuery 在固定位置显示列表中的选定项
- AngularJS在URL正下方显示列表
- 使用 ajax 显示列表
- 制作另一个窗体,该窗体将显示列表(自动完成)并将用作所选字段的值
- 在不使用按钮的情况下显示列表,带有挖空功能
- 如何使用 object.id 显示列表中的 object.name
- PHP 如果选中复选框<选择>则会显示列表
- 是否可以在单击 html 未显示列表中的项目标记时触发事件