编辑： Jfiddle： http://jsfiddle.net/d21jgqba/1/
我有一些代码，我试图链接不同的位置，但链接不会重定向我，但当我将鼠标悬停在它们上时，页面左下角有正确的网页。所有的帮助将不胜感激！
我正在使用我在网上找到的可扩展列表代码，但已根据自己的需要进行编辑，两者都不适用于链接。原始代码在这里给出：http://jasalguero.com/ledld/development/web/expandable-list/
以下是我的编辑：
实际链接在第二个 while 循环中。
.php：
<div class="container">
<div class="title"><h3>Courses</h3></div>
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<ul id="expList">
<?php
while($dept = mysqli_fetch_array($result)) {
echo"<li>".$dept['dname']."<ul>";
$coursequery = "SELECT * FROM courses WHERE dname='".$dept['dname']."'";
$resultc = mysqli_query($mysqli, $coursequery) or die(mysql_error());
while($course = mysqli_fetch_array($resultc)) {
echo "<li><a href='"http://www.reddit.com/'">".$dept['dname']." ".$course['courseNO']."</a></li>";
}
echo "</ul></li>";
}
//echo "<li><a href='"documents/".$dept['dname']."/".$course['courseNO']."/index.php'">".$dept['dname']." ".$course['courseNO']."</a></li>";
?>
</ul>
</div>
<div class="horizontal-line"></div>
.css：
/********************/
/* GENERAL SETTINGS */
/********************/
body {
background-color: #AAAAAA;
font-size: 16px;
}
#menu {
list-style: none;
padding: 0;
margin: 0;
}
.clear {
clear: both;
}
/********************/
/* EXPANDABLE LIST */
/********************/
#listContainer {
margin-top: 15px;
}
#expList ul,
li {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
pointer-events: none;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}
.listControl {
margin-bottom: 15px;
}
.listControl a {
border: 1px solid #555555;
color: #555555;
cursor: pointer;
height: 1.5em;
line-height: 1.5em;
margin-right: 5px;
padding: 4px 10px;
}
.listControl a:hover {
background-color: #555555;
color: #222222;
font-weight: normal;
}生成的 HTML：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Expandable list</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/scripts.js">
</script>
</script>
</head>
<div class="container">
<div class="title">
<h3>Courses</h3>
</div>
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<ul id="expList">
<li>BSEN
<ul></ul>
</li>
<li>CPSC
<ul>
<li><a href="http://www.reddit.com/r/XboxOne">CPSC 413</a>
</li>
<li><a href="http://www.reddit.com/r/XboxOne">CPSC 310</a>
</li>
</ul>
</li>
<li>ENGG
<ul>
<li><a href="http://www.reddit.com/r/XboxOne">ENGG 499</a>
</li>
</ul>
</li>
</ul>
</div>
</div>JavaScript （script.js）：
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
prepareList()
});它在这个小提琴上工作正常：http://jsfiddle.net/hd08gLax/
我更改了返回假;返回真;在第8行。
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return true;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready(function () {
prepareList();
});
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function () {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
});
$('#collapseList')
.unbind('click')
.click(function () {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
});
删除 css 标签 "#expList ul， li" 中的这一行
pointer-events: none;
在一个单独的不相关案例中，对我来说原因是 preventDefault（）
$（'a'）.click（ function（e） {
e.preventDefault();
}）;
我删除了它，它起作用了。