PHP/HTML/css：链接不可点击
[英]Php/HTML/css: links not clickable
问题描述
EDIT: Jfiddle: http://jsfiddle.net/d21jgqba/1/
编辑：Jfiddle： http : //jsfiddle.net/d21jgqba/1/
I have some code where I am trying to link a different location but the links do not redirect me but have the correct webpage in the bottom left of the page when I hover over them.我有一些代码，我试图链接不同的位置，但是当我将鼠标悬停在它们上面时，这些链接不会重定向我，而是在页面的左下角有正确的网页。 All help will be greatly appreciated!所有帮助将不胜感激！
I am using a expandable list code I found online but have edited to my own needs, both dont work for linking.我正在使用我在网上找到的可扩展列表代码，但已根据我自己的需要进行了编辑，两者都不适用于链接。 The original code is given here: http://jasalguero.com/ledld/development/web/expandable-list/原始代码在这里给出： http : //jasalguero.com/ledld/development/web/expandable-list/
Here are my edits:以下是我的编辑：
The actual link is in the second while loop.实际链接位于第二个 while 循环中。
php: 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: 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; }
Generated HTML:生成的 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): 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() });
3 个解决方案
解决方案1
1 已采纳 2014-12-10 21:14:59
It works fine at this fiddle: http://jsfiddle.net/hd08gLax/它在这个小提琴上工作正常： http : //jsfiddle.net/hd08gLax/
I changed return false;我改了 return false; to return true;返回真； on line 8.在第 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');
});
解决方案2
1 2014-12-10 21:30:17
删除css标签“#expList ul, li”中的这一行
pointer-events: none;
解决方案3
0 2020-09-26 16:07:39
In a separate unrelated case,For me the cause was preventDefault()在一个单独的不相关的情况下，对我来说原因是 preventDefault()
$('a').click( function(e) { $('a').click(函数(e){
e.preventDefault();
}); });
I removed that and it worked.我删除了它并且它起作用了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.