锚 html (<a>) 仅适用于右键单击而不是左键单击

Question

我有一个锚标记，如下所示，左键单击不起作用。目前，用户需要右击打开它，因为左击不起作用。一旦我左键单击链接，单击锚点的 <li> 的 display 样式就会更改。

问题：单击“下载 PDF”>“示例 1”（不起作用）

<html>
<head>


<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
        <ol class="myList">
            <li class="showList"><a href=""><img
                    src="http://www.example.com/image.png" />Download PDFs</a>
                <div class="pdfFiles">
                    <ol>
                        <li><a href="http://www.example.com/sample1.pdf"><i
                                class="fa fa-file-pdf-o f24"></i> Sample 1</a>
                            <div class="pdfSize">10MB</div></li>
                    </ol>
                </div>
            </li>
         </ol>
</body>
<style>
.myList {
    list-style-type: none;
}

.myList>li {
    padding-top: 1%;
}

.myList li.showList {
    background: -moz-linear-gradient(center top, GhostWhite, #aca696) repeat
        scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 20px;
    height: auto;
    width: 100%;
}

.myList li .pdfFiles {
    transition: all 1.5s ease 0s, visibility 0s linear 0.5s;
    /* the last value is the transition-delay for visibility */
    display: none;
    height: auto;
}

.myList li .pdfFiles li {
    height: 32px;
    line-height: 36px;
    vertical-align: middle;
    padding-left: 20px;
    list-style-type: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px
}

.myList li .pdfFiles li a {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}

.pdfSize {
    line-height: 26px;
    font-size: 12px;
    height: 26px;
    border-radius: 10px;
    float: right;
    padding: 0px 10px 0 10px;
    margin-top: 2px;
}
</style>
<script>
    $('.showList a').click(function() {
        $('pdfFiles').hide();
        $(this).siblings().toggle();
        return false;
    })
</script>
</html>

地址有http://

Answer 1

这感觉像是我必须缺少的一些基本内容，但是：

<a href="www.example.com/sample1.pfg">

无法工作。因为它没有协议前缀（例如 "http://"），浏览器会将其解释为相对的 link，并尝试从其当前位置开始获取具有该路径的页面，而不是从example.com.

编辑：正确的语法是： <a href="http://www.example.com/sample1.pfg"> - 当然，假设在该位置确实存在这样的文件。

不过，我无法解释右键单击是如何工作的。

Answer 2

问题出在您的 jQuery 上。您正在使用锚标记来切换同级 div，但您并未将选择限制为仅第一个锚标记。因此，当您单击要下载的 PDF 文件时，它会再次切换脚本。

将您的脚本更改为：

 $('.showList a:first').click(function() {
        $('pdfFiles').hide();
        $(this).siblings().toggle();
        return false;
    })

这里有一个working CodePen demo。

锚 html (<a>) 仅适用于右键单击而不是左键单击

Anchor html (<a>) just works for right click not left click

javascript

html

css

font-awesome