Php/HTML/css: links not clickable

Question

EDIT: 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/

Here are my edits:

The actual link is in the second while loop.

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; }

Generated 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() });

Answer 1

It works fine at this fiddle: http://jsfiddle.net/hd08gLax/

I changed return false; to return true; on line 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');
});

Answer 2

删除css标签“#expList ul, li”中的这一行

pointer-events: none;

Answer 3

In a separate unrelated case,For me the cause was preventDefault()

$('a').click( function(e) {

   e.preventDefault();

});

I removed that and it worked.

Php/HTML/css: links not clickable

Question

3 answers

solution1
1 ACCPTED 2014-12-10 21:14:59

solution2
1 2014-12-10 21:30:17

solution3
0 2020-09-26 16:07:39

Php/HTML/css: links not clickable

Question

3 answers

solution1 1 ACCPTED 2014-12-10 21:14:59

solution2 1 2014-12-10 21:30:17

solution3 0 2020-09-26 16:07:39

solution1
1 ACCPTED 2014-12-10 21:14:59

solution2
1 2014-12-10 21:30:17

solution3
0 2020-09-26 16:07:39